Google map infowindow fires click event twice

Question

I'm working with google map API v.3. I'm adding an image on infowindow and want to handle click event of that image. But click event fires twice. Here is my code-

var mapOptions = {center: new google.maps.LatLng(lat,lng), zoom: 15, mapTypeId:   google.maps.MapTypeId.ROADMAP};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var myLatlng = new google.maps.LatLng(lat,lng);
var data = {}; data.title = 'title'; data.lat = lat;data.lng = lng;
data.description = '<img class="test-image" src="src"';
var marker = new google.maps.Marker({position: myLatlng, map: map,title: 'title'});

(function (marker, data) {
    google.maps.event.addListener(marker, "click", function (e) {
                                infoWindow.setContent(data.description);
                                infoWindow.open(map, marker);
                            });


    google.maps.event.addDomListener(infoWindow, 'domready', function () {
                                $('.test-image').click(function () {
                                    alert("Hello World");
                                });
                            });                              
 })(marker, data);

How can i get rid of this problem?

Thanking you in anticipation.

Answer 1

I can't tell you the reason for this behaviour, but it may be fixed when you use addListenerOnce and apply the domready-listener in the click-callback of the marker:

(function (marker, data) {
    google.maps.event.addListener(marker, "click", function (e) {
      google.maps.event.addListenerOnce(infoWindow, 'domready', function () {
         $('.test-image').click(function () {
              alert("Hello World");
        });
      });       
      infoWindow.setContent(data.description);
      infoWindow.open(map,marker);
    });
})(marker, data);