Google map API v3 clicks on clickMarkerClusterer click?

Question

I have a Google Map API v3 map on a page that uses MarkerClusterer . I have a function that needs to be run when we click on the map, it is registered as:

google.maps.event.addListener(map, 'click', function (event) { CallMe(event.latLng); }); 

So my problem is this: when I click on the MarkerClusterer cluster, instead of behaving like a marker and not raising a click event on the map, it’s only the one from the marker that causes a click from the map.

To test this, I created a warning from clicking markerclusterer:

 google.maps.event.addListener(markerClusterer, "clusterclick", function (cluster) { alert('MarkerClusterer click event'); }); 

Thus, clusterclick rises after the click event of a map object. Then I cannot remove the listener of the map object as a solution. Is there a way to check if there is a cluster click in the click event on the map? Or a way to replicate marker behavior and not trigger a map click event when clustererclick is called? Google and the documentation didn't help me.

thanks

Answer 1

Here is something that works, but I'm still open to other better answers.

I am using setTimeout to relay the map click event, to be the last javascript to execute, and check with boolean if clustererclick was raised earlier with something like this:

 google.maps.event.addListener(map, 'click', function (event) { setTimeout(function () { if (!clusterClicked) { CallMe(event.latLng); alert('Map click executed'); } else { clusterClicked = false; alert('ClusterClicked map click not executed'); } }, 0); }); google.maps.event.addListener(markerClusterer, "clusterclick", function (cluster) { clusterClicked = true; }); 

Answer 2

I had the same problems and the solution I ended up with:

 ClusterIcon.prototype.onAdd = function() { this.div_ = document.createElement('DIV'); if (this.visible_) { var pos = this.getPosFromLatLng_(this.center_); this.div_.style.cssText = this.createCss(pos); this.div_.innerHTML = this.sums_.text; } var panes = this.getPanes(); panes.overlayMouseTarget.appendChild(this.div_); var that = this; google.maps.event.addDomListener(this.div_, 'click', function(e) { =======> e.stopImmediatePropagation(); //<==================== that.triggerClusterClick(); }); }; 

I hate doing this, but in other respects is it okay to "expand" external libraries?

Answer 3

I found another solution that might work. Find the following code inside markerclusterer.js:

 google.maps.event.addDomListener(this.div_, 'click', function() { that.triggerClusterClick(); }); 

and change it to:

 google.maps.event.addDomListener(this.div_, 'click', function(ev) { ev.cancelBubble = true; if (ev.stopPropagation) { ev.stopPropagation(); } that.triggerClusterClick(); }); 

According to Martin Matisyak of Google, “this is called event propagation, an event always“ bubbles ”in the DOM hierarchy. You can stop this from [this] code.

See: https://groups.google.com/forum/#!topic/google-maps-js-api-v3/PGeNrzv_SAs

Answer 4

I used this method, inspired by other answers, but without copying the library code or changing the library itself:

 originalOnAdd = ClusterIcon.prototype.onAdd; ClusterIcon.prototype.onAdd = function() { originalOnAdd.call(this); google.maps.event.addDomListener(this.div_, 'click', function (ev) { ev.cancelBubble = true; if (ev.stopPropagation) ev.stopPropagation(); }); }