Google Maps API Múltiples marcadores con Infowindows

Estoy tratando de agregar múltiples marcadores, cada uno con su propia ventana de información que aparece cuando se hace clic en. Tengo problemas para que aparezcan los infowindows. Cuando lo intento, solo aparece un marcador sin una ventana de información.Google Maps API Múltiples marcadores con Infowindows

Gracias, que me haga saber si necesita alguna información más

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<style type="text/css"> 
html { 
    height: 100% 
} 

body { 
    height: 100%; 
    margin: 0; 
    padding: 0 
} 

#map_canvas { 
    height: 100% 
} 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false"> 
</script> 
<script type="text/javascript"> 

var locations = [ 
    ['loan 1', 33.890542, 151.274856, 'address 1'], 
    ['loan 2', 33.923036, 151.259052, 'address 2'], 
    ['loan 3', 34.028249, 151.157507, 'address 3'], 
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'], 
    ['loan 5', 33.950198, 151.259302, 'address 5'] 
]; 

function initialize() { 

    var myOptions = { 
     center: new google.maps.LatLng(33.890542, 151.274856), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    }; 
    var map = new google.maps.Map(document.getElementById("default"), 
     myOptions); 

    setMarkers(map, locations) 
} 


function setMarkers(map, locations) { 

    var marker, i 
    for (i = 0; i < locations.length; i++) { 

     var loan = locations[i][0] 
     var lat = locations[i][1] 
     var long = locations[i][2] 
     var add = locations[i][3] 

     latlngset = new google.maps.LatLng(lat, long); 

     var marker = new google.maps.Marker({ 
      map: map, title: loan, position: latlngset 
     }); 
     map.setCenter(marker.getPosition()) 

     var content = "Loan Number: " + loan + '</h3>' + "Address: " + add 

     var infowindow = new google.maps.InfoWindow() 

     google.maps.AddListener(marker, 'click', function (map, marker) { 
      infowindow.setContent(content) 
      infowindow.open(map, marker) 
     }); 
    } 
} 


</script> 
</head> 
<body onload="initialize()"> 
<div id="default" style="width:100%; height:100%"></div> 
</body> 
</html>

Fuente

2012-06-19 StackTraceYo

uso solamente UN ventana de información que se crea antes de que los marcadores. Luego, su evento de clic para cada marcador funcionará correctamente. La variable 'content' dentro de su detector de eventos no está definida dentro de esa función. – js1568

muchas gracias hombre – StackTraceYo

Un blog de detalles: http://sforsuresh.in/display-google-map-locations-using-latitude-longitude/ –

163

Se puede usar un cierre. Basta con modificar el código de la siguiente manera:

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

Aquí es el DEMO

Fuente

2012-06-19 18:09:23 Engineer

gracias, realmente lo aprecio – StackTraceYo

Lo hice funcionar, pero ¿cómo podría cambiar el código para que cuando hago clic en ¿otro marcador abre una ventana de información que reemplaza la ventana de información que estaba abierta anteriormente, en lugar de abrir continuamente más ventanas de información cada vez que hago clic en otro marcador? – railsy

+11

demostración actualizada usando algunas soluciones - http://jsfiddle.net/ZFvDV/ –

-1

function setMarkers(map,locations){ 

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

var loan = locations[i][0]; 
var lat = locations[i][1]; 
var long = locations[i][2]; 
var add = locations[i][3]; 

latlngset = new google.maps.LatLng(lat, long); 

var marker = new google.maps.Marker({ 
      map: map, title: loan , position: latlngset 
}); 
map.setCenter(marker.getPosition()); 


marker.content = "<h3>Loan Number: " + loan + '</h3>' + "Address: " + add; 


google.maps.events.addListener(marker,'click', function(map,marker){ 
      map.infowindow.setContent(marker.content); 
      map.infowindow.open(map,marker); 

}); 

} 
}

A continuación, coloque var infowindow = new google.maps.InfoWindow() a la función initialize():

function initialize() { 

    var myOptions = { 
     center: new google.maps.LatLng(33.890542, 151.274856), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    }; 
    var map = new google.maps.Map(document.getElementById("default"), 
     myOptions); 
    map.infowindow = new google.maps.InfoWindow(); 

    setMarkers(map,locations) 

    }

Fuente

2012-06-19 18:11:33 js1568

'google.maps.events.AddListener' debe ser' google.maps.event.addListener' –

Me aparece 'TypeError: map .infowindow no está definido' si incluyo 'var infowindow = new google.maps.InfoWindow();' dentro de mi función initialize() – invot

Aquí está el fragmento de código que funcionará con seguridad . Puede visitar a continuación link para trabajar jsFiddle y explicaciones en detalle. How to locate multiple addresses on google maps with perfect zoom

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

Fuente

2014-03-09 17:28:04 evaipar

Si también desea enlazar cierre de ventana de información a algún evento, intentar algo como esto

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

Fuente

2016-07-18 14:32:53

Google Maps API Múltiples marcadores con Infowindows

Respuesta

Cuestiones relacionadas