Geek Answers Handbook

Google Map API V3 - How to prevent a mouse click event for a marker when the user actually double-clicks

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

  • click
  • Dblclick

I want to do the following:

  • When the user clicks on the marker, the map should enlarge and show a more detailed map.
  • I want to associate the dblclick event with the same marker so that it loads some third-party reports into the adjacent div element.

In other words, I want it to behave differently when the user clicks or dblclicks. But the problem is that when I bind both of these events to the marker and double clicks of the user, the marker, the 'click' handler fires, and I don’t want this to happen.

Is it true that when the user double-clicks the click event also fires? If so, how can I prevent the 'click' event from triggering when the user actually double-clicks? Is there a way that I can do different things when clicking and marker double-click event?

+6
source share
2 answers

This is a well-known api nuance, you need to set the click counter timeout, for example:

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 information:

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

+4
source

You can use the preprocessor function, which separates one-time from double-clicks. In this case, the second click should be within 500 milliseconds of the first:

 //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 a mouseEvent object that event handlers receive as a parameter.

0
source

More articles:


All Articles