title: Google Map's Double Click Event Propagation
body: <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>