StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POGoogle Map's Double Click Event Propagation
text
Body
copied!<blockquote> <p>This question is asked often, but never really answered well. Let's see if we can remedy it!</p> </blockquote> <h2>Event Propagation</h2> <p><strong>Google</strong> allows you to bind to events in a Google Map View via their <a href="https://developers.google.com/maps/documentation/javascript/" rel="noreferrer">API</a> using <a href="https://developers.google.com/maps/documentation/javascript/examples/event-simple" rel="noreferrer">event handlers</a>.</p> <p>Sometimes you may bind your event handler to an event that Google <em>itself</em> is already bound to. Thus, when your event fires and does whatever you told it to do you may find Google also doing its own little thing at the same time.</p> <blockquote> <p>Hmm, can I handle the event so my code runs, but stop the event from continuing on and firing Google's event handler?</p> </blockquote> <p><strong>You sure can</strong>! Welcome to <code>Event Propagation</code> (aka Event Bubbling).</p> <h2>Take a look at this code</h2> <p>Here I bind an event handler to double clicking on the Google Map:</p> <pre><code>var aListener = google.maps.event.addListener(map, 'dblclick', function(event) { // Try to prevent event propagation to the map event.stop(); event.cancelBubble = true; if (event.stopPropagation) { event.stopPropagation(); } if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }); </code></pre> <p>Here <code>map</code> is a Google Map object to bind to.</p> <p>This doesn't work. The event bubbles, and the map zooms in. I don't know why.</p> <blockquote> <p>You ask, have you read the documentation?</p> </blockquote> <p>Indeed. The <a href="https://developers.google.com/maps/documentation/javascript/reference#MouseEvent" rel="noreferrer">documentation</a> says to use <code>event.stop();</code></p> <p>I have looked at what others are saying. <a href="https://code.google.com/p/gmaps-api-issues/issues/detail?id=2172" rel="noreferrer">This issue</a> is exactly my problem. It was marked as fixed, but the solution does not work.</p> <p>Ideas?</p> <h2>Workaround</h2> <p>A possible workaround for the doubleclick event is to disable Google's default behavior when you need it to not fire, and then re-enable it later.</p> <p>You do this with the <code>disableDoubleClickZoom</code> argument. See the documentation <a href="https://developers.google.com/maps/documentation/javascript/reference#MapOptions" rel="noreferrer">here</a>.</p> <p>Here is some code to disable:</p> <pre><code>map.set("disableDoubleClickZoom", true); </code></pre> <p>Now to re-Enable:</p> <pre><code>map.set("disableDoubleClickZoom", false); </code></pre> <p>Of course, you can set the property in the <code>MapOptions</code> argument for when the <code>map</code> object is created in the first place.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload