javascript - una - Google Maps API Múltiples marcadores con Infowindows
marcadores multiples desde una base de datos en google maps (4)
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.
Gracias, avísame si necesitas más información
<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>
Aquí está el fragmento de código que funcionará con seguridad. Puede visitar el siguiente link para trabajar jsFiddle y explicaciones en detalle. link
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));
Podría usar un cierre. Simplemente modifica tu código así:
google.maps.event.addListener(marker,''click'', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
Aquí está la DEMO
Si también desea vincular el cierre de infowindow a algún evento, intente 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));
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, mueva 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)
}