I need to have different markers for different mapTypes, and I'm pushing them to a MarkerClusterer.

I "hide" the markers with:

cluster.set("map", null);
cluster.resetViewport();
cluster.redraw();

And "show" them with:

cluster.set("map", MAP);
cluster.resetViewport();
cluster.redraw();

The problem is that MarkerClusterer seems to not like set("map", null); it throws the error TypeError: Object #<a MarkerClusterer> has no method 'remove'. How can I show/hide them the proper way?

I need to have different markers for different mapTypes, and I'm pushing them to a MarkerClusterer.

I "hide" the markers with:

cluster.set("map", null);
cluster.resetViewport();
cluster.redraw();

And "show" them with:

cluster.set("map", MAP);
cluster.resetViewport();
cluster.redraw();

The problem is that MarkerClusterer seems to not like set("map", null); it throws the error TypeError: Object #<a MarkerClusterer> has no method 'remove'. How can I show/hide them the proper way?

• javascript
• google-maps-api-3
• markerclusterer

• The setVisible() answer from this other question seems to work for me stackoverflow.com/questions/14894384/… – Emery Lapinski Commented Apr 26, 2015 at 3:56

5 Answers 5

In the Javascript API v3 it is sufficient to say:

clusterer.setMap(null);

If you set your map back to the existing map object, the clusters will reappear.

clusterer.setMap( this.map );

Also, I would suggest not to name your Clusterer 'cluster', like in your example. The MarkerClusterer contains Cluster objects, which are the actual clustered markers and not the ClusterER itself.

Elegant way to clear the cluster

cluster.clearMarkers();

Here is a more complete solution:

in .html add:

<div id="map-canvas-hidden" style="display:none"></div>
<div id="map-canvas-shown" style="width:500px; height:500px"></div>

in .js add:

MarkerClusterer.prototype.remove = function() { };
var HIDDEN_MAP = new google.maps.Map(document.getElementById("map-canvas-hidden"), {});
var gmap = new google.maps.Map(document.getElementById("map-canvas-shown"), {});

to show the clusters:

    cluster.setMap(gmap);
    cluster.resetViewport();
    cluster.redraw();

to hide the clusters:

    cluster.setMap(HIDDEN_MAP);
    cluster.resetViewport();
    cluster.redraw();

finally, I needed the folowing patches to markerclusterer.js:

--- markerclusterer.js.orig 2013-12-06 18:02:32.887516000 +0100
+++ markerclusterer.js  2013-12-06 18:03:25.487516924 +0100
@@ -620,6 +620,7 @@
  */
 MarkerClusterer.prototype.getExtendedBounds = function(bounds) {
   var projection = this.getProjection();
+  if (!projection) return null;

   // Turn the bounds into latlng.
   var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
@@ -657,7 +658,7 @@
  * @private
  */
 MarkerClusterer.prototype.isMarkerInBounds_ = function(marker, bounds) {
-  return bounds.contains(marker.getPosition());
+  return bounds ? bounds.contains(marker.getPosition()) : false;
 };

hope this helps

Here is my code to easily show/hide clusters on the map (updated for the current versions of Maps API and JS-Cluster-Renderer). Thanks Gabi.

MarkerClusterer.prototype.remove = function() {};

MarkerClusterer.prototype.hide = function() {
  this.setMap(null);
  this.resetViewport();
};

MarkerClusterer.prototype.show = function() {
  this.setMap(map); // replace map with your reference to the map object
  this.redraw();
};

// To hide the clusters:
cluster.hide();

// To show the clusters:
cluster.show();

I fought my way into solving this by a little monkeypatching and a little hack. I'm still waiting for a clean answer, but this is a solution to my problem, so I'm also posting this:

MarkerClusterer.prototype.remove = function () {}

[..]

cluster.set("map", HIDDEN_MAP); // remove the clusterer
cluster.resetViewport();
cluster.redraw();