Google Maps API - unable to set several infoWindows on several markers
I have the following code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function initialize() {
var cities = {{json|safe}};
/*
for (i in cities) { // 0, 1
// document.write(cities[i]['fields']['name'] +'<br />');
document.write(cities[i]['fields']['x'] +'<br />');
document.write(cities[i]['fields']['y'] +'<br />');
document.write('<br />');
} /* */
var center = new google.maps.LatLng(-22.784791,-45.088806);
var myOptions = {
zoom: 8,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var citiesLoc = new Array();
// var flightPlanCoords = new Array();
var infoBoxes = new Array();
var markers = new Array();
for (var i in cities) {
// document.write(cities[i]['fields']['name'] );
citiesLoc[i] = new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']);
// flightPlanCoords.push(new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']));
infoBoxes[i] = new google.maps.InfoWindow({
content: "<div>" + citie开发者_开发问答s[i]['fields']['name'] + "</div>"
});
markers[i] = new google.maps.Marker({
position: citiesLoc[i],
map: map,
title: cities[i]['fields']['name']
});
google.maps.event.addListener(markers[i], 'click', function() {
infoBoxes[i].open(map, markers[i]);
});
};
// document.write(infoBoxes[1]['content']);
/*
var flightPath = new google.maps.Polyline({
path: flightPlanCoords,
strokeColor: "#0000ff",
strokeOpacity: 1.0,
strokeWeight: 5
});
flightPath.setMap(map);
*/
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Which sets up two markers with two infowindows attached, but when I click either one, only one of them (number 1 of 2, zero-indexed) shows up. If I write it like this:
google.maps.event.addListener(markers[0], 'click', function() {
infoBoxes[0].open(map, markers[0]);
});
google.maps.event.addListener(markers[1], 'click', function() {
infoBoxes[1].open(map, markers[1]);
});
then it works just fine. What am I missing?
When infoBoxes[i].open(map, markers[i]); is evaluated inside you function it will take the updated value of i, the one after the loop ends, i.e. 1.
Just do an alert(i) in there to see that this happens.
Here's a crude fix (tested and working):
markers[i]._index = i;
google.maps.event.addListener(markers[i], 'click', function() {
infoBoxes[this._index].open(map, markers[this._index]);
});
You should probably read more here http://code.google.com/apis/maps/documentation/javascript/events.html . I know it's a lot to read, but it's sometimes necessary.
I really don't know what the problem is... this question is still unanswered. however this trick works: I create two more counters and use and increment them inside my loop. I really don't know why this should work, and this is not the way to program, but here goes.
counter1 = 0;
counter2 = 0;
for (var i in cities) {
// document.write(cities[i]['fields']['name'] );
citiesLoc[i] = new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']);
// flightPlanCoords.push(new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']));
infoBoxes[i] = new google.maps.InfoWindow({
content: "<div>" + cities[i]['fields']['name'] + "</div>"
});
markers[i] = new google.maps.Marker({
position: citiesLoc[i],
map: map,
title: cities[i]['fields']['name']
});
google.maps.event.addListener(markers[i], 'click', function() {
infoBoxes[counter1++].open(map, markers[counter2++]);
});
};
加载中,请稍侯......
精彩评论