1

Related to this question: 'Make custom overlay clickable (Google Maps API 3)' and related also to my comment in the same question (posted here to give it more visibility and because I think is other problem).

I have added a click listener to my overlay polygon but now I have the problem that when user wants to pan the map and clicks on an overlay to do that, when the mouse button is released the click event is triggered. Obviously I don't want to execute the onclick action when I just want to pan the map. Any elegant solution for this issue?

Here is an example of the issue: panning/click issue.

Community
  • 1
  • 1
christiansr85
  • 867
  • 19
  • 40

1 Answers1

6

Check out this updated fiddle here: http://jsfiddle.net/9gvsq3od/5/

Basically I added this code:

 var dragging = false;

 google.maps.event.addDomListener(this.path_, 'mousedown', function (evt) {
     dragging = false;
 });

 google.maps.event.addDomListener(this.path_, 'mousemove', function (evt) {
     dragging = true;
 });

 // onclick listener
 google.maps.event.addDomListener(this.path_, 'click', function (evt) {
     if (dragging) { return false;} 
     alert('clicked on path');
 });

The click event is only triggered when the mouse button is released so code sets a variable dragging to true when the mouse moves. The first mousedown handle resets the dragging variable, since there is no "mousestop" event, we need to reset the state when beginning a new interaction instead.

Blake Simpson
  • 1,078
  • 6
  • 10
  • OK Blake, it is working fine. The only solution I had in my head was to add listeners to the map when user started and stopped panning, but I think that isn't efficient since in my application I have several overlayed polygons. Your approach seems to be much more better. Just as curiosity, is this way or any other similar how google maps api manage the `onclick` event on `google.maps.Polygon` objects while user is panning the map? Thanks! – christiansr85 Dec 16 '14 at 13:23