Question

I am using the Markercluster plugin for Google Maps API V3. I want to access the click event when the user clicks on the cluster icon. The closest that I can come to is

JS Code

google.maps.event.addListener(mc, "clusterclick", function (cluster) {
    event.stopPropagation();
});

Problem: event.stopPropagation() only works this way in Chrome and not Firefox or IE. It can only work if it is passed a event object is added as a parameter to the function like so:

$("#div").click(function(event) { 
    event.stopPropagation();
}

However, I dont know the DOM element of the cluster icon created by MarkerClusterer so I cant select it!! What should I do?

Answer 1

See here: https://developers.google.com/maps/documentation/javascript/events#EventArguments

google.maps.event.addListener(map, ‘click’, function(event) { placeMarker(event.latLng); });

The first parameter for the event calback is the event object. In you case it would be:

google.maps.event.addListener(mc, "clusterclick", function (cluster) {     
    cluster.stopPropagation();     
});

Since this is a custom event and the programmers didn’t passed the event object as a parameter, your solution would be to implement it yourself:

Lines 150 and 151 from http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerclustererplus/src/markerclusterer.js?r=362:

from:

google.maps.event.trigger(mc, "click", cClusterIcon.cluster_);
google.maps.event.trigger(mc, "clusterclick", cClusterIcon.cluster_); // deprecated name 

to:

google.maps.event.trigger(mc, "click", e, cClusterIcon.cluster_);
google.maps.event.trigger(mc, "clusterclick", e, cClusterIcon.cluster_); // deprecated name 

Note the e as the 3rd parameter. This is the event object from the original event that calls this 2 lines on line 139:

google.maps.event.addDomListener(this.div_, "click", function (e) {