CODEWITHSUNDEEP
javascriptjquerygoogle-mapsdom-events
Nyxynyx
Nyxynyx

Reputation: 63727

Prevent click event from propagating/bubbling onto Google Maps

I am using the MarkerClusterer library for Google Maps API V3 to group nearby markers into a single marker. When the user clicks on the cluster marker, a div appears beside that cluster marker. Now I want to make it such that after clicking on the cluster marker, to close the div that popped up, he can click on the map.

Problem: After adding a google.maps.event.addListener(map, 'click', function(){}) on the map, when the user clicks on the cluster marker to open the popup div, nothing happens!! I'm guessing the click event on the cluster marker caused the div to popup, but the click event also propagated to the map, triggering the map's click listener to close the popup.

I wish i can use jQuery's event.stopPropagation() but where can I get the event object?

How can I solve this problem? How can I prevent the click from propagating through the cluster marker to the map? Hopefully the solution is cross-browser compatible.

JS Code

clusterclickListener = google.maps.event.addListener(mc, "clusterclick", function (cluster) {
    $('#content_container').show();
});

google.maps.event.addListener(map, 'click', function() {
    $('#content_container').hide(); 
});

Upvotes: 2

Views: 5062

Answers (1)

Michal
Michal

Reputation: 13649

Hmm. I just tested this and everything works for me. My only advice is to check if your div has correct html/css/positioning as it may simply be covered up by a map.

Event object is accessible by default in the handler function. If you want to access the event object you can simply access it using "event" so event.stopPropagation() should work. Keep in mind that if you pass "event" as an argument to the handler function you will get a custom Google maps click event which does not have stopPropagation method.

Upvotes: 4

Related Questions