google maps + jquery auto close last infowindow

Question

I am trying to call mouseover event on markers when a user hovers over address. When open new infowindow need to close last infowindow, but dont know how to start. Open this page:

http://fiddle.jshell.net/spYYh/12/

Plz help me! Thanks!

Answer 1

This question is similar to this one - Google Maps API v3: Close infowindow when DOM element is clicked - so the answer applies.

The key difference being that you want to detect a mouse over event, which will be a "mouseover" event instead of the "click" event mentioned in the reference question and answer.

google.maps.event.addListener(marker, 'mouseover', function() {
   infowindow.setContent(contentString);
   infowindow.open(map, marker);
});

It doesn't matter that your problem is serving multiple markers. We can do this:-

var infowindow = null;
.
.
.
/* now inside your initialise function */
infowindow = new google.maps.InfoWindow({
    content: "holding..."
});

for (var i = 0; i < markers.length; i++) {
    var marker = markers[i];
    google.maps.event.addListener(marker, 'mouseover', function() {
        //open the infowindow when it's not open yet
        if(contentStringCal!=infowindow.getContent())
        {
          infowindow.setContent(contentStringCal);
          infowindow.open(map, marker);
        }
    });

    google.maps.event.addListener(marker, 'click', function() {
        //when the infowindow is open, close it an clear the contents
        if(contentStringCal==infowindow.getContent())
        {
          infowindow.close(map, marker);
          infowindow.setContent('');
        }
        //otherwise trigger mouseover to open the infowindow
        else
        {
          google.maps.event.trigger(marker, 'mouseover');
        }
    });

    //clear the contents of the infwindow on closeclick
    google.maps.event.addListener(infowindow, 'closeclick', function() {
          infowindow.setContent('');
    });
}