CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Shreyas
Shreyas

Reputation: 69

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

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?

Upvotes: 6

Views: 3189

Answers (2)

Marcelo
Marcelo

Reputation: 9407

You can use a pre-handler function that separates single from double clicks. In this case, the second click must come within 500 miliseconds of the first one:

//Global vars
var G = google.maps;
var clickTimeOut = null;

G.event.addListener(marker,'click',mClick);


function mClick(mev) {
    if (clickTimeOut) {
        window.clearTimeout(clickTimeOut);
        clickTimeOut = null;
        doubleClick(mev);
    }
    else {
        clickTimeOut = window.setTimeout(function(){singleClick(mev)},500);
    }
}

function doubleClick(mev) {
    // handle double click here
}

function singleClick(mev) {
    window.clearTimeout(clckTimeOut);
    clickTimeOut = null;
    // handle single click here
}

mev is the mouseEvent object that the event handlers receive as parameter.

Upvotes: 0

Nelson Benítez León
Nelson Benítez León

Reputation: 50563

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

Upvotes: 4

Related Questions