Avoid custom overlay click event when map is panning (google maps API)

Question

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.

Answer 1

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.