Search code examples
javascriptgoogle-mapscordovagoogle-maps-markersmarkerclusterer

Delete marker clusters from google maps [not just the markers]

In my phonegapp/cordova app, I use the google maps tool and I need to change, sometimes, the points showed on it. I found some useful code here to remove my markers from the google maps I use.

My problem I also use marker clusters and I have a weird problem here.

For my maps, I use these settings:

{
    showControls: true,
    key: { google: "XXXXXX" },
    center: center,
    width: "100%",
    height: "95%",
    zoom: zoom,
    provider: "google",
    mapType: "satellite",
    autoAdjust: false,
    onReady: SetMap
}

Where SetMap and the other called functions are:

var mmm = null;
var markerCluster = null;

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setMapOnAll(null);
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
    for (var i = 0; i < markerCluster.markers_.length; i++) {
        markerCluster.markers_[i].setMap(map);
    }
}

function SetMap (s) {

    if (mmm == null)
        mmm = s.originalMap;
    else {
        clearMarkers();
        markerCluster.markers_ = [];
    }
    var map = mmm;
    var markers = [];
    for (var i = 0; i < pointsOnMapList.length; i++) {
        var data = pointsOnMapList[i];
        var latLng = new google.maps.LatLng(data.location[0], data.location[1]);
        var marker = createMarker(latLng, data.title, map, data.idimp);
        markers.push(marker);
    }
    markerCluster = new MarkerClusterer(map, markers, { imagePath: 'images/m' });
}

When I update my dataset, I simply call the SetMap function.

This "almost" work. My goal is to change the points in the map after the user filters them. I get a new dataset from my api and I have to erase the map and populate it again with my new points.

Example: let's say I have this map:

enter image description here

Then, I filter my map points and I get old and new points in the same maps:

enter image description here

Then, like magic, if I just change the map zoom, the old points disappear!

enter image description here

NOTE: the single markers are deleted as I filter my dataset, without changing the zoom. This problem is only for the marker clusters. How can I delete them?

Solution

  • Just found the clue. Editing my code in this way:

    function SetMap (s) {
    if (mmm == null)
        mmm = s.originalMap;
    else {
        markerCluster.clearMarkers();
    }
    var map = mmm;
    var markers = [];
    for (var i = 0; i < pointsOnMapList.length; i++) {
        var data = pointsOnMapList[i];
        var latLng = new google.maps.LatLng(data.location[0], data.location[1]);
        var marker = createMarker(latLng, data.title, map, data.idimp);
        markers.push(marker);
    }
    markerCluster = new MarkerClusterer(map, markers, { imagePath: 'images/m' });
}

    it works, all the markers and cluster are removed!!!