Google Maps Api V3: click event firing twice

Question

I am following the MVCObject binding example from this page:

http://code.google.com/apis/maps/articles/mvcfun.html

I want to change the color of the circle a

Answer 1

This works for me:

google.maps.event.addListener(circle, 'click', function (e) {
    clearTimeout(this.doNotTriggerTwiceTimeout);
    this.doNotTriggerTwiceTimeout = setTimeout(function(){
        alert('circle clicked');
    }, 100);
});

Answer 2

I had a similar problem. Could it be a bug in maps API v3? I do not have an answer but a workaround:

google.maps.event.addListener(circle, 'click', function(event) {       
    if (event.alreadyCalled_) {
        alert('circle clicked again'); 
    }
    else {
        alert('circle clicked first time');      
        event.alreadyCalled_ = true;
    }
}); 

The click is still triggered twice but you can detect it.

Answer 3

Do you have another click listener on the map? Try using mouseEvent.stop() so that it doesn't propagate to the map. documentation here

   google.maps.event.addListener(circle, 'click', function(mev) {
           mev.stop();
           alert('circle clicked'); 
   });

It could be the line

 circle.bindTo('map', this);

that causes it.

Answer 4

To actually find out what is calling the function, use console.log(event) and check the developer tools console:

google.maps.event.addListener(circle, 'click', function()
{
    alert('circle clicked');
    console.log(event);
});

You should have 2 events listed (if they do trigger twice). Then check the "srcElement" attribute of the events to see what element had called the function.

From a similar issue of my own, I found that the Google maps event listener was not specific enough on what element would trigger the function. So I replaced the Google maps event listener with a JQuery event listener to be more specific and target a specific element by it's ID attribute.

Google Maps event listener (fired twice)

google.maps.event.addDomListener(control, 'click', function() { toggleLabels(); });

JQuery event listener (fired once)

$('body').on('click', '#labels-switch', function(){ toggleLabels(); });

Answer 5

It seems maps API triggering an extra "click" event just after original click event fired. Most proper way to prevent I found out by debugging;

google.maps.event.addListener(marker, 'click', function(event) {
    console.log(event);  //see console for original mouse event     
    var ev = event.b;  //event.b object is original mouse event and might change

    //prevent defualts
    ev.preventDefault();
    ev.stopPropagation();
}); 

This will prevent the second trigger properly.