Set Marker Clusterer Async After Ajax

I have a Google Maps v3 on my webpage which will be set with a lot of markers (3000 - 5000). This is my shortened code for this now: function initialize(){ var map = new googl

Solution 1:

You can create marker clusterer before ajax call and add each created marker to marker clusterer in for loop:

for (var i = 0; i < firstPoiOfAllTurns.length; ++i) {
        // markers.push(addMarker(map, firstPoiOfAllTurns[i].pois[0], firstPoiOfAllTurns[i].id, '' ,infowindow));

        mc.addMarker(addMarker(map, firstPoiOfAllTurns[i].pois[0], firstPoiOfAllTurns[i].id, '' ,infowindow), true);
     }

I assume that addMarker() create a new marker.

Solution 2:

Another option would be to move the creation and initialization of the clusterer inside the call back function that creates the markers:

.done(function(response){
    firstPoiOfAllTurns = response;
    for (var i = 0; i < firstPoiOfAllTurns.length; ++i) {
        markers.push(addMarker(map, firstPoiOfAllTurns[i].pois[0], firstPoiOfAllTurns[i].id, '' ,infowindow));
     }
     var mcOptions = {gridSize: 50, maxZoom: 15};
     var mc = new MarkerClusterer(map, markers, mcOptions);
})