12

I am trying to create an interactive map with cluster that need to be displayed when user checks a box and removed when the box is unchecked again. So far everything is working well, the cluster work and everything, but I have noticed a strange behavior that I can't explain and fix : every time I uncheck the box and check it again, the number displayed in the cluster is incremented by the amount of marker in that region (so it somehow never gets reseted to zero when I do "clearMarkers"

Here is the code for the function concerned :

//Display or remove PREDICTED accident's markers.
function toDisplayPredictedAccidents ()
{
    //If the checkbox is checked : Display all the PREDICTED accident's markers.
    if(checkBoxPredicted.checked == true)
    {
        for (i = 0; i < predictedAccidentArray.length; i++) 
        {  
            marker = new google.maps.Marker
            ({
                position: new google.maps.LatLng(predictedAccidentArray[i][1], predictedAccidentArray[i][2]),
                icon : iconPredicted
            });
            markersPredicted.push(marker); //Put the created marker in an array.


           //Create the pop-up when we click on the marker.
           google.maps.event.addListener(marker, 'click', (function(marker, i)
           {
              return function() 
              {
                  infowindow.setContent(predictedAccidentArray[i][0]);
                  infowindow.open(map, marker);
              }
           })(marker, i));
        }
        markerClusterPredicted = new MarkerClusterer(map, markersPredicted);
    }
    else
    {
        clearPredictedMarkers();
        markerClusterPredicted.clearMarkers();

    }
}

//clearMarkers and setAllMap are related and aim to REMOVE all the PREDICTED accident's markers.
function clearPredictedMarkers() {
  setAllMapPredicted(null, markersPredicted);
}

function setAllMapPredicted(map, markersArray) 
{
  for (var i = 0; i < markersArray.length; i++) 
  {
     markersPredicted[i].setMap(map);
  }
}

Anyone knows how to fix this behavior ? :)

Zoé de Moffarts
  • 165
  • 1
  • 2
  • 9
  • You did not delete markers from `markersPredicted` but just detach them from the map. So, next time you put the same markers into the array and show them all. – Anto Jurković Apr 10 '14 at 18:45
  • Okay, so could you point me to a method or technique to delete them from the array ? (I tried to do setMap(null) on all the elements on the array, but that doesn't seem do anything at all) – Zoé de Moffarts Apr 10 '14 at 18:52

3 Answers3

33

Just for anyone who is searching on the internet for actual answer (since this question is very old):

var markerCluster = new MarkerClusterer(map, markers);

markerCluster.clearMarkers();

this will remove all markers in markerCluster.

Everything can be found here: https://googlemaps.github.io/js-marker-clusterer/docs/reference.html¨

Update 10.11.2020

js-marker-clusterer has moved and the old repo is no longer maintained. Instead, you should use https://github.com/googlemaps/v3-utility-library

Update 13.1.2022

I think links should be probably updated once again. I was able to find 2 repos and I do not know a difference:

https://github.com/googlemaps/js-markerclustererplus

https://github.com/googlemaps/js-markerclusterer

And here is documentation: https://googlemaps.github.io/js-markerclusterer/

Kuba Šimonovský
  • 2,013
  • 2
  • 17
  • 35
7
markerCluster.remove(myMarker);

If you have a list of markers to remove just do that :

for (var i = 0; i < markers.length; i++) {
  markerCluster.removeMarker(markers[i]);
}
Patrick
  • 674
  • 1
  • 8
  • 22
ala3
  • 99
  • 2
  • 7
0

Just empty your markersPredicted array after setAllMapPredicted(null,markersPredicted) like this

function clearPredictedMarkers() {
  setAllMapPredicted(null, markersPredicted);
  markersPredicted = [];
}
barbsan
  • 3,418
  • 11
  • 21
  • 28
Nouman Nazir
  • 1