Google Maps Mouseout only applied to last infowindow

Question

.Hello I have a random problem I haven't been able to figure out. I have a map with markers that show infowindows when you hover over them which are supposed to close when you move your mouse away. For some reason the second part (closing the infowindow on mouseout) only gets applied to the last marker.

If anyone could explain to me where I'm going wrong and how to fix my code so that all of the infowindows will close when the user moves their mouse away from the marker it'd be greatly appreciated! Thanks!

Here is my setMarkers snippet

function setMarkers(map, locations) {

    for (var i = 0; i < locations.length; i++) {
        var item = locations[i];

        var myLatLng = new google.maps.LatLng(item[1], item[2]);

        var address1 = item[5];

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });

        var content = address;

        var infowindow = new google.maps.InfoWindow()

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

        google.maps.event.addListener(marker, 'mouseout', function () {
            infowindow.close();
        });
    }

}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

You aren't getting function closure for the mouseout handler, but you are for the mouseover handler. To fix the issue, change:

function setMarkers(map, locations) {

      for (var i=0; i < locations.length; i++){
        var item   = locations[i];

        var myLatLng    = new google.maps.LatLng(item[1], item[2]);

        var address1    = item[5];

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
        });

        var content = address;

       var infowindow = new google.maps.InfoWindow()

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

       google.maps.event.addListener(marker, 'mouseout', function(){
          infowindow.close();
       });
      }

    }  

google.maps.event.addDomListener(window, 'load', initialize);

To:

function setMarkers(map, locations) {

      for (var i=0; i < locations.length; i++){
        var item   = locations[i];

        var myLatLng    = new google.maps.LatLng(item[1], item[2]);

        var address    = item[5];

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
        });

        var content = address;

       var infowindow = new google.maps.InfoWindow()

      google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){ 
        return function() {
           infowindow.setContent(content);
           infowindow.open(map,marker);
        };
    })(marker,content,infowindow)); 
      google.maps.event.addListener(marker, 'mouseout', (function(marker,content,infowindow){ 
        return function() {
           infowindow.close();
        };
    })(marker,content,infowindow)); 

    }  
}
google.maps.event.addDomListener(window, 'load', initialize);

working fiddle

Working code snippet:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  setMarkers(map, locations);


}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
  ['Bondi Beach', -33.890542, 151.274856, , , 'Bondi Beach', 4],
  ['Coogee Beach', -33.923036, 151.259052, , , 'Coogee Beach', 5],
  ['Cronulla Beach', -34.028249, 151.157507, , , 'Cronulla Beach', 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, , , 'Manly Beach', 2],
  ['Maroubra Beach', -33.950198, 151.259302, , , 'Maroubra Beach', 1]
];

function setMarkers(map, locations) {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < locations.length; i++) {
    var item = locations[i];

    var myLatLng = new google.maps.LatLng(item[1], item[2]);
    bounds.extend(myLatLng);
    var address = item[5];

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
    });

    var content = address;

    var infowindow = new google.maps.InfoWindow()

    google.maps.event.addListener(marker, 'mouseover', (function(marker, content, infowindow) {
      return function() {
        infowindow.setContent(content);
        infowindow.open(map, marker);
      };
    })(marker, content, infowindow));
    google.maps.event.addListener(marker, 'mouseout', (function(marker, content, infowindow) {
      return function() {
        infowindow.close();
      };
    })(marker, content, infowindow));

  }
  map.fitBounds(bounds);
}

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>