Geek asks and answers

Combining Google Maps MarkerClusterer v3 and Viewport marker management

I successfully configured MarkerClusterer v3 and Viewer Marker Management (making an ajax call to collect only the markers visible with the viewport and rendering them each time the map is "inactive") separately.

However, when I combine them, they only work together when the page first loads, not later.

When scaling or panning, the original clusters remain, and the markers for the entire map are displayed non-clustered, but the cluster markers remain earlier.

The original cluster markers still behave properly, although when zooming in / out, the new markers provided when changing the boundaries of the viewport are not added to them or are 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);
});
+3
1

, , URL- , . , . , , :

, ajax:

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);
}

, . , , , , .

, , MarkerClustererPlus; : ?.

+2

More articles:


All Articles