Stop Propagation of Google Maps Marker Click Event – a Solution!

by Oliver 18. September 2015 18:55

Here's a simple scenario using Google Maps Javascript API v3 that until today I could not get to work properly:

Open a custom map popup window after clicking on a map marker, and close it when clicking anywhere on the map or the rest of the surrounding page.

The code I tried

to open the map on click of a marker:

  1. google.maps.event.addListener(marker, "click", function() {
  2.     showPopup(marker);
  3. });

to close any open marker on clicking anywhere outside the map popup:

  1. $(document).on("click.mappopup.offmap", function() {
  2.     closeAllMarkers(markers);
  3. });

The problem I was facing was that the click event that was triggered on the marker would bubble all the way up to the document and the map popup would barely show up when it was already being closed again.

Looking for a solution on the web I stumbled upon this old thread on Google code in which several attempts were made to fix the issue and a maps API team member even announced the bug as fixed, but no-one seemed to actually have actually solved the problem.

Things I've tried according to the above thread

  1. google.maps.event.addListener(marker, "click", function(ev) {
  2.     showPopup(marker);
  3.  
  4.     // does not do a thing
  5.     ev.cancelBubble = true;
  6.  
  7.     // does not exist on the passed in event object
  8.     ev.stopPropagation && ev.stopPropagation();
  9.  
  10.     // does not exist on the passed in event object
  11.     ev.preventDefault && ev.preventDefault();
  12.     
  13.     // what Google devs proposed but also did not work
  14.     ev.stop();
  15. });

But then I stumbled upon this answer on stackoverflow in which the author mentions: 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. And that brought me on the right track!

So I removed the ev parameter from the handler and used the global event object to try and stop it from bubbling up. After trying a few combinations of the above code I settled with this one:

The Working Code

  1. google.maps.event.addListener(marker, "click", function() {
  2.     showPopup(marker);
  3.  
  4.     // actually stops the event from bubbling up to the map or the document
  5.     event.preventDefault();
  6. });

And that was it! I couldn't believe that the solution was so simple.

Comments (5) -

Alexander
Alexander Ukraine
1/15/2016 5:59:54 AM #

Unortunately this approach doesn't work in old browsers (which I use to check):
IE8 - "preventDefault" doesn't exist in the object
Opera 9.64 - event still goes to other layers on the map

Reply

Xamedow
Xamedow Russia
3/23/2016 9:23:45 AM #

unfortunately global event is undefined in FF. Managed to handle that case by checking event object 'handled' property in DOM object click handler. Handled appears to exist only when marker is clicked.


$(document).on("click.mappopup.offmap", function(ev) {
    if(!ev.handled) {
        closeAllMarkers(markers);
    }
});

Reply

Dave
Dave United States
5/18/2016 4:28:21 AM #

Hi Oliver,

Just wondering if this solution is still working for you? I have an example at https://jsfiddle.net/y4zs7vp2/ that is based on Google's own overlay example. The click still propagates through to the map so the infowindow is opened and closed immediately when clicking on the marker.

Thanks for any insight you can provide!

Cheers,
~Dave

Reply

Romuald
Romuald France
12/27/2016 6:10:22 PM #

Hello Dave,

You can now use event.stop(); to stop the propagation with the latests Map SDK versions.

Cheers,
~Romuald

Reply

Oliver
Oliver Poland
4/29/2017 9:56:40 PM #

Thanks, Romuald, for letting us know!

Reply

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

About Oliver

shades-of-orange.com code blog logo I build web applications using ASP.NET and have a passion for jQuery. Enjoy MVC 4 and Orchard CMS, and I do TDD whenever I can. I like clean code. Love to spend time with my wife and our daughter. My profile on Stack Exchange, a network of free, community-driven Q&A sites

About Anton

shades-of-orange.com code blog logo I'm a software developer at teamaton. I code in C# and work with MVC, Orchard, SpecFlow, Coypu and NHibernate. I enjoy beach volleyball, board games and Coke.