Updating MarkerClusterer

Question

I have managed to updated the map according to which places (from my DB) are including in the current map. However, I have some issues to update the clusturers in the same way. I have try to add markerClusterer.clearMarkers() following gmarkers[i].setMap(null); but it does not work (even markers are not updated anymore).

Here's the code:

var map;  
var gmarkers = [];

function initialize() {
    var latlng = new google.maps.LatLng(46.7, 2.5);   
    var myOptions = {
        zoom: 6, 
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };   

    map = new google.maps.Map(document.getElementById('map'), myOptions);

    /* Ici, on ajoute l'écouteur d'événement suite à un glisser / déposer  */ 
    google.maps.event.addListener(map, 'idle', function() {
        var bds = map.getBounds();
        var South_Lat = bds.getSouthWest().lat();
        var South_Lng = bds.getSouthWest().lng();
        var North_Lat = bds.getNorthEast().lat();
        var North_Lng = bds.getNorthEast().lng();
        var Zoom_Level = map.getZoom();         // hide and delete the existing markers

        for (var i=0; i<gmarkers.length; i++) {
            gmarkers[i].setMap(null);
        }

        gmarkers = [];
        downloadUrl("./includes/AjaxMarkers.php?maxlat="+North_Lat+"&minlat="+South_Lat+"&minlong="+South_Lng+"&maxlong="+North_Lng+"&zoom="+Zoom_Level, function(data) { 
            var xml = xmlParse(data);
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
                createMarker(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute('titre'));
            }

            var markerClusterer = new MarkerClusterer(map, gmarkers);
        });

        markerClusterer.resetViewport()
    });
}

function createMarker(lat, lng, titre) {
    var latlng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: titre    });    // keep a reference to created markers so you can remove them
    gmarkers.push(marker);
}

Thanks you!

Answer 1

Your markerClusterer is defined inside the callback to downloadUrl, and isn't accessible outside of that scope.

The simplest fix is to define it in the global context.

var map;  
var gmarkers = [];
var markerClusterer = null;

function initialize() {

then in the downloadUrl callback:

    downloadUrl("./includes/AjaxMarkers.php?maxlat="+North_Lat+"&minlat="+South_Lat+"&minlong="+South_Lng+"&maxlong="+North_Lng+"&zoom="+Zoom_Level, function(data) { 
        var xml = xmlParse(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            createMarker(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), markers[i].getAttribute('titre'));
        }

        markerClusterer = new MarkerClusterer(map, gmarkers);
    });