javascript - icon - Google Maps Mouseout solo se aplica a la última ventana de información

popup google map javascript

Question

Hola, tengo un problema al azar que no he podido descifrar. Tengo un mapa con marcadores que muestran ventanas de información cuando pasas sobre ellas y se supone que se cierran cuando mueves el mouse. Por alguna razón, la segunda parte (cerrar la ventana de información en mouseout) solo se aplica al último marcador.

Si alguien pudiera explicarme dónde me estoy equivocando y cómo arreglar mi código para que todas las ventanas de información se cierren cuando el usuario mueva su mouse lejos del marcador, ¡sería muy apreciado! ¡Gracias!

Aquí está mi fragmento de setMarkers

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

No obtendrá el cierre de la función para el manejador de mouseout, pero usted es para el controlador mouseover. Para solucionar el problema, cambie:

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

A:

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

violín de trabajo

Fragmento de código de trabajo:

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>