Google Map API V3 — How to prevent mouse click event for a marker when user actually has double clicked

Question

I have a marker on the map to which I want to bind two events:

1. click
2. dblclick

I want to do the following:

1. When user clicks on the marker, map should zoom-in and will show more detailed map.
2. I want to bind 'dblclick' event to the same marker so that it will load some third-party reports in adjacent 'div' element.

In other words, I want it to behave differently when user clicks or dblclicks. But the problem is, when I bind both these event to marker and user 'double clicks' the marker, 'click' handler is getting fired, which I don't want to let it happen.

Is it true that, when user double-clicks, click event is also fired? If so, how to prevent it from triggering 'click' event when user actually double-clicked? Is there any way so that I can do different things on either click and double-click event of the marker?

Answer 1

It's a known nuance of the api, you need to install a click counter timeout, like this:

function createMap2() {
  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById("map2"), myOptions); 

  var doubleClicked=false;
  var clickEvent;

  google.maps.event.addListener(map, 'dblclick', function(event) { 
    doubleClicked=true;
  }); 

  function handleClick() {
    if (!doubleClicked) {
      infoWindow.setPosition(clickEvent.latLng);
      infoWindow.setContent(createInfo(clickEvent));
      infoWindow.open(map);
    }
  }

  google.maps.event.addListener(map, 'click', function(event) { 
    clickEvent = event;
    doubleClicked = false;
    window.setTimeout(handleClick, 250);
  }); 
}

Above code extracted from http://www.william-map.com/20100506/1/v3click.htm

Check out these links for more info:

https://groups.google.com/forum/?fromgroups=#!topic/google-maps-js-api-v3/YRAvYHngeNk https://groups.google.com/forum/?fromgroups=#!topic/google-maps-js-api-v3/2MomDiLMEiw