MarkerClusterer is not coming up in my Map

Question

I'm trying to achieve using this, why am I not able to get that using this. I've tried this put my markers in array as you can find my var markers is defined as array and the finally I've tried to output it by using var mc = new MarkerClusterer(map, markers);

This I've used for reference http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/docs/examples.html

Where it is mentioned:

Once you create a marker cluster, you will want to add markers to it. MarkerClusterer supports adding markers using the addMarkers() method or by providing a array of markers to the constructor:

JS Fiddle: http://jsfiddle.net/24wfR/

Below mentioned is my code for achieving this

function createMarker(latlng, i, tran_store_id) {
    var storeMarker = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(0, 0), new google.maps.Point(0, 50));
    var marker = new MarkerWithLabel({
        position: latlng,
        icon: storeMarker,
        map: map,
        draggable: false,
        raiseOnDrag: false,
        labelContent: (i + 1),
        labelAnchor: new google.maps.Point(0, 40),
        labelClass: "store-custom-labels label_" + (i) + "_no",
        // the CSS class for the label
        labelInBackground: false
    });
    marker.set("id", i);
    //console.log(Drupal.settings.store.themepopup[tran_store_id]);
    var myOptions = {
        content: Drupal.settings.store.themepopup[tran_store_id],
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(-142, -379),
        zIndex: null,
        boxStyle: {
            width: "500px"
        },
        closeBoxMargin: "6px -161px 0px 0px",
        closeBoxURL: Drupal.settings.store.module_path + "/images/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "overlayMouseTarget",
        enableEventPropagation: false
    };
    var ib = new InfoBox(myOptions);
    google.maps.event.addListener(marker, "click", function (e) {
        google.maps.event.trigger(map, "click");
        for (var i = 0; i < totalMarkerCount; i++) {
            var giconsc = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(0, 0), new google.maps.Point(0, 50));
            markers[i].setIcon(giconsc);
            jQuery('.label_' + i + '_no').css('color', '#ffffff');
        }
        var val = marker.get("id");
        jQuery("div.search-result-item").removeClass("active");
        jQuery("#" + val).addClass('active');
        jQuery('.label_' + val + '_no').css('color', '#ffffff');
        var gicons = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(55, 0), new google.maps.Point(0, 50));
        marker.setIcon(gicons);
        ib.open(map, marker);
    });
    google.maps.event.addListener(marker, "mouseover", function () {
        var val = marker.get("id");
        if (!jQuery('#' + val).hasClass('search-result-item active')) {
            jQuery('.label_' + val + '_no').css('color', '#ffffff');
        }
    });
    google.maps.event.addListener(marker, "mouseout", function () {
        var val = marker.get("id");
        if (!jQuery('#' + val).hasClass('search-result-item active')) {
            var gicons = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(0, 0), new google.maps.Point(0, 50));
            marker.setIcon(gicons);
            jQuery('.label_' + val + '_no').css('color', '#ffffff');
        }
    });
    google.maps.event.addListener(ib, "closeclick", function () {
        ib.close();
        var val = marker.get("id");
        jQuery("#" + val).removeClass('active');
        jQuery('.label_' + i + '_no').css('color', '#ffffff');
        var gicons = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(0, 0), new google.maps.Point(0, 50));
        marker.setIcon(gicons);
    });
    google.maps.event.addListener(map, 'click', function () {
        ib.close();
        var val = marker.get("id");
        jQuery("#" + val).removeClass('active');
        jQuery('.label_' + i + '_no').css('color', '#ffffff');
        var gicons = new google.maps.MarkerImage(Drupal.settings.store.module_path + "/images/marker.png", new google.maps.Size(50, 60), new google.maps.Point(0, 0), new google.maps.Point(0, 50));
        marker.setIcon(gicons);
    });
    markers.push(marker);
    var mc = new MarkerClusterer(map, markers);
}

Answer 1

Credit goes to Anto Jurković

Answer was pretty clear and many thanks again for that!

Create cluster after for loop which calls createMarker() function. Hence I've done the same thing, called the var mc = new MarkerClusterer(map, markers); just after my loop gets finished where I've called the createMarker()

for (var i = 0; i < markerNodes.length; i++) {
    name = markerNodes[i].getAttribute("name");
    address = markerNodes[i].getAttribute("address");
    latlng = new google.maps.LatLng(
    parseFloat(markerNodes[i].getAttribute("lat")), parseFloat(markerNodes[i].getAttribute("lng")));
    timings = markerNodes[i].getAttribute("timings");
    size = markerNodes[i].getAttribute("size");
    phone = markerNodes[i].getAttribute("phone");
    getaddress = markerNodes[i].getAttribute("getaddress");
    tran_store_id = markerNodes[i].getAttribute("tran_store_id");
    sidebar_entry = '<div id=' + i + ' class="contact_content"><div class="top"><em>' + markerNodes[i].getAttribute("name") + '</em><br /> ' + address + '</div>';
    if (phone != '') {
        sidebar_entry = sidebar_entry + '<div class="btm"> ' + phone + '</div>';
    }
    sidebar_entry = sidebar_entry + '</div>';
    jQuery('#stores_list').append(sidebar_entry);
    createMarker(latlng, i, tran_store_id);
    bounds.extend(latlng);
    var viewlist = document.getElementById(i);
    viewlist.onclick = function () {
        selectMarker(this.id);
        jQuery("#stores_list.div").removeClass("active");
        jQuery(this).addClass("active");
    };
    totalMarkerCount = i;
    j++;
}
var mc = new MarkerClusterer(map, markers);