CODEWITHSUNDEEP
google-maps-api-3google-maps-markersmarkerclusterer
user198003
user198003

Reputation: 11161

Google Maps Api v3 - how to remove cluster icons?

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...

Upvotes: 23

Views: 34032

Answers (5)

Rob
Rob

Reputation: 1919

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

Upvotes: 0

HoffZ
HoffZ

Reputation: 7729

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

Upvotes: 53

Sergey Romanov
Sergey Romanov

Reputation: 3080

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.

Upvotes: 0

Sergey Serduk
Sergey Serduk

Reputation: 113

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

markerCluster = new MarkerClusterer(map);

Upvotes: 4

Crag
Crag

Reputation: 458

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

Upvotes: 0

Related Questions