CODEWITHSUNDEEP
javascriptjquerygoogle-maps-api-3viewportmarkerclusterer
VikingGoat
VikingGoat

Reputation: 477

Combining Google Maps MarkerClusterer v3 and Viewport Marker Management

I've successfully setup both MarkerClusterer v3 and Viewport Marker Management ( performing an ajax call to gather only markers visible with viewport and rendering those whenever the map is 'idle') separately.

However when I combine them, they only seem to work together when the page first loads and not afterward.

When zooming or panning the initial clusters remain and the markers are for the entire map are rendered unclustered, but leaves the previously clustered markers.

The original clustered markers still behave properly though when you zoom in/out, but the new markers provided when the viewport bounds are changed aren't added to them or clustered.

Code Below:

function drawMap(swLat, swLng, neLat, neLng){
    //Load the map data
     $.ajax({
            type: "POST",
            url: "readMapInfo.php",
            cache: false,
            data:{S:swLat, W:swLng, N:neLat, E:neLng},
            dataType: "xml",
            success: function(data) {
            if(markerArray.length >0){
                for (i in markerArray) {
                    markerArray[i].setMap(null);
                }
                drawMarker(data);   //takes the info provided and performs "markerArray.push(marker);"
                mc = new MarkerClusterer(map, markerArray, clusterOptions);
            } else {
                drawMarker(data);   //takes the info provided and performs "markerArray.push(marker);"
                mc = new MarkerClusterer(map, markerArray, clusterOptions);
            }
    });
}

google.maps.event.addListener(map, 'idle', function() {
    bounds = map.getBounds();
    sw = bounds.getSouthWest();
    ne = bounds.getNorthEast();
    swLat = sw.lat();
    swLng = sw.lng();
    neLat = ne.lat();
    neLng = ne.lng();

    drawMap(swLat, swLng, neLat, neLng);
});

Upvotes: 3

Views: 4821

Answers (1)

Sean Mickey
Sean Mickey

Reputation: 7716

Your description of your problem is detailed and thorough, but it would be easier if there were also a URL to a page that demonstrates the problem(s). Of course, that may not be possible in this specific scenario. That said, I will take a crack at helping out:

I believe you need some additional cleanup code at the beginning of your ajax success callback:

if( markerArray.length > 0 ) {
    // For loop logic is unchanged
    // It removes the markers from the Map, but leaves them in markerArray
    for (i in markerArray) {
        markerArray[i].setMap( null );    
    }

    // New code to truncate the Array; the markers should be removed
    markerArray.length = 0;

    // New code to clear the clusterer; the markers should be removed
    mc.clearMarkers();        

    // Original line of code unchanged
    drawMarker(data);   //takes the data and performs markerArray.push(marker)

    // Commented out, because the cluster is cleared each time, not recreated
    //mc = new MarkerClusterer(map, markerArray, clusterOptions);

    // New code to refill the cluster, rather than recreate the cluster
    // The original clusterOptions are retained
    mc.addMarkers( markerArray );

} else {
    // Original line of code unchanged
    drawMarker(data);   //takes the data and performs markerArray.push(marker)

    // Original line of code unchanged
    // Necessary here, because the clusterer does not yet exist
    mc = new MarkerClusterer(map, markerArray, clusterOptions);
}

I believe this will help move you forward. Please let me know if this resolves the problem or at least helps.

After you have your immediate challenges resolved, I also suggest that you take a look at MarkerClustererPlus; it is described in the question: Is there any way to disable the Marker Clusterer for less than defined marker counts?.

Upvotes: 2

Related Questions