CODEWITHSUNDEEP
javascriptgoogle-maps-api-3dom-events
lowzhien
lowzhien

Reputation: 57

Google Maps Api V3: click event firing twice

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 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?

Upvotes: 4

Views: 5812

Answers (5)

whiteswift
whiteswift

Reputation: 1

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

Upvotes: 0

André Fiedler
André Fiedler

Reputation: 1103

This works for me:

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

Upvotes: 1

Marcelo
Marcelo

Reputation: 9407

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.

Upvotes: 1

burak altundal
burak altundal

Reputation: 712

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.

Upvotes: 2

Jiri Kriz
Jiri Kriz

Reputation: 9292

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.

Upvotes: 4

Related Questions