23

how can i remove all cluster icons (cluster markers) from map? tryed with advices like:

Google Maps API v3: How to remove all markers?

... but it did not worked.

can you help me how to achieve that?

thank you in advance!

UPDATE (2010-11-23)

markers are stored in array with 

var markersClust = Array();

... and are added with (combination with php):

markersClust.push(marker_<?php echo $team["Team"]["id"]; ?>);

var markerClusterer = new MarkerClusterer(MyMap.map, markersClust, clusterOptions);

and it works fine.

but, i can not remove them from a map, and it drives me...

tryed to remove markers (and i did) with

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

but cluster icons are stil on the map.

also i tryed things like:

markerClusterer.clearMarkers();

and like

MyMap.preventDefault();
MyMap.stopPropagation();
MyMap.clearMarkers();

but, again, icons of the clusters are still there, on a map.

what else do i have to do to remove those cluster icons from my map? please help...

Community
  • 1
  • 1
user198003
  • 11,029
  • 28
  • 94
  • 152

5 Answers5

52

This is the right way to do it:

// Unset all markers
var i = 0, l = markers.length;
for (i; i<l; i++) {
    markers[i].setMap(null)
}
markers = [];

// Clears all clusters and markers from the clusterer.
markerClusterer.clearMarkers();

Demo: http://jsfiddle.net/HoffZ/gEzxx/

Documentation: https://googlemaps.github.io/js-marker-clusterer/docs/reference.html

danagerous
  • 125
  • 1
  • 7
HoffZ
  • 7,709
  • 6
  • 36
  • 40
  • I didn't need to loop through the markers at all. I just called `markerClusterer.clearMarkers()` – hellatan Nov 03 '13 at 13:31
  • 1
    Yes, @hellatan, clearMarkers() is enough to hide the markers. But they will still be in memory. If you call clearMarkers() and add more markers to the array later, the old markers will show again if you initialize 'new MarkerClusterer(map, markers)'. So, unset the array if you want to *remove* the markers. – HoffZ Nov 04 '13 at 19:22
  • ah, thanks for the clarification @HoffZ. I just started playing around with the maps api last week so my knowledge is pretty limited at this point. – hellatan Nov 04 '13 at 22:39
  • Luckily MarkerCluster has a `getMarkers()` method on it, so your script doesn't need to keep another reference to all the added markers. – Diederik Mar 23 '15 at 15:01
  • This IS the correct answer. In my case I was missing the `clearMarkers()` call, but had the rest. As someone else mentioned it is important to include what is above so you truly remove them and won't add them back unknowingly later in your code because they were in memory. – user756659 Dec 07 '20 at 03:32
4

I had the same problem as well. I fixed it by only declaring my MarkerClusterer once during initialization:

markerCluster = new MarkerClusterer(map);
andrewsi
  • 10,807
  • 132
  • 35
  • 51
Sergey Serduk
  • 113
  • 1
  • 8
0

This is what I do. I have many markers but when I switch to heatmap I want to remove all markers and clusterer. When i create marker I add it to global markers array

 markers.push(marker);

I define clustere like this

markerCluster = new MarkerClusterer(map, markers);
markerCluster.setIgnoreHidden(true);

When i click button to show heatmap

$.each(markers, function(k, v){
    v.setVisible(false);
});
markerCluster.repaint();

When repaint() is called with ignore hidden it hides all cluster icons.

Sergey Romanov
  • 2,949
  • 4
  • 23
  • 38
0

Iterate over each marker and set that marker's map to null. That will remove the marker from the map.

Crag
  • 458
  • 4
  • 14
  • 5
    yes, with markersClust[i].setMap(null); markersClust = new Array(); i removed markers from map, but marks for clusters are still there... – user198003 Nov 23 '10 at 10:41
  • Are you using any other tools to display the clusters? Don't believe gmv3 has clusters built in. If you can tell us what other js you are using that might help us help you. – Crag Nov 23 '10 at 16:56
  • i use http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/ also, can you please check updated part of my post... – user198003 Nov 23 '10 at 17:08
  • 8
    I'm using that same utility in a project I'm working on. Make sure that your markerClusterer variable is declared properly (I use var markerClusterer = null; at the beginning of the js file) and markerClusterer.clearMarkers() should work (no other code needed to remove the markers or clusters, just that single line cleared my entire map of every marker/cluster). – Crag Nov 23 '10 at 18:09
  • 1
    Good hint Crag! Still in 2019! – Piero Alberto Jun 22 '19 at 10:05
  • As well as in 2022! Thank you! – Alexey Zalyotov Nov 08 '22 at 20:37
0

Building on and extending some of the answers in ITT:

Examples of clustermarkerplus generally show how to use it if it is initialized as part of a full page load.

If you're using the library in a single page application and refreshing markers when bounds change, declaring the New MarkerClusterer(map) will cause you to have not only clusters persist, but some markers may also persist, presumably because the library optimizes marker display in addition to handling actual cluster icons.

As a result, during your page initialization you should create the one MarkerClusterer object. Then during updates, you should do the individual marker null behavior, but also, clear the MarkerClusterer object.

Example function to call after you've built new google.maps.Map() where you set options and create the global variable mapSet['facilityMarkerCluster']:

const clusterFacilityMarkers = function () {
  const clusterOptions = {
    imagePath: "/static/js/dependencies/markerclustererplus/img/m",
    gridSize: 75,
    zoomOnClick: true,
    maxZoom: 8,
  };

  mapSet['facilityMarkerCluster'] = new MarkerClusterer(mapSet['map'], [], clusterOptions);
};

Note the declaration uses an empty array of markers, since presumably your marker update routine that adds markers will run after this even if it is a full page reload.

In this update routine, during the add markers portion for your map, (which may be run when bounds change and after you've properly cleared individual markers):

const addFacilityMarkers = function (resolve) {

// For loop over creation of your updated set of markers
            createFacilityMarker(facilitiesJson[key]);

// Update marker clusters

        // Clear the markercluster objects
        mapSet['facilityMarkerCluster'].clearMarkers();
        // Then add your array of markers to the markercluster object
                mapSet['facilityMarkerCluster'].addMarkers(mapSet['facilityMarkers']);
};
Rob
  • 1,656
  • 2
  • 17
  • 33