I am following the MVCObject binding example from this page:

.html

I want to change the color of the circle and toggle the visibility of the markers when the user clicks on the circle, so I add the listener into the RadiusWidget constructor as follows:

function RadiusWidget() {
    var circle = new google.maps.Circle({
      strokeWeight: 2
    });

    this.set('distance', 50);
    this.bindTo('bounds', circle); 
    circle.bindTo('center', this);
    circle.bindTo('map', this);
    circle.bindTo('radius', this);
    this.addSizer_();

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

My problem is that the click event is firing TWICE. Does anyone know why?

I am following the MVCObject binding example from this page:

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

I want to change the color of the circle and toggle the visibility of the markers when the user clicks on the circle, so I add the listener into the RadiusWidget constructor as follows:

function RadiusWidget() {
    var circle = new google.maps.Circle({
      strokeWeight: 2
    });

    this.set('distance', 50);
    this.bindTo('bounds', circle); 
    circle.bindTo('center', this);
    circle.bindTo('map', this);
    circle.bindTo('radius', this);
    this.addSizer_();

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

My problem is that the click event is firing TWICE. Does anyone know why?

• javascript
• google-maps-api-3
• dom-events

• could it be that the event is being intercepted first by the map itself and then passed on to the circle object too – JWL Commented Jun 27, 2011 at 8:13
• Is there anyway to check where the listener function is being called from? – lowzhien Commented Jun 27, 2011 at 8:24

5 Answers 5

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.

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.

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.

This works for me:

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

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(); });