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);
  4.     // does not do a thing
  5.     ev.cancelBubble = true;
  7.     // does not exist on the passed in event object
  8.     ev.stopPropagation && ev.stopPropagation();
  10.     // does not exist on the passed in event object
  11.     ev.preventDefault && ev.preventDefault();
  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);
  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 (7) -

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


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) {


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 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!



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.



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

Thanks, Romuald, for letting us know!


fla France
6/16/2017 10:27:58 AM #

Any solution for the `closeclick` event raised when the user clicks the cross of an InfoWindow? Because the API code doesn't provide access to the event:

google.maps.event.addListener(infowindow, "closeclick", function() {
    // The API function doesn't have the e parameter, I can't access closeclick


Oliver Poland
6/19/2017 1:44:03 PM #

Unfortunately, I cannot help here. I would post this question on - there chances will be much higher to get an answer to your question Wink


Add comment

  Country flag

  • Comment
  • Preview

About Oliver code blog logo I build web applications using ASP.NET and have a passion for javascript. 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 children. My profile on Stack Exchange, a network of free, community-driven Q&A sites

About Anton 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.