Unable to mark more than one coordinate in Google Maps
Below is the code listed to set markers in Google Maps. But only one marker is being set whereas four markers should be set.
What is wrong with this code?
<!DOCTYPE html>
<html>
<head>
<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 type="text/javascript">
var locations = [
[4, -33.890542, 151.274856,'Town1', 'Page1.aspx'],
[3, -33.923036, 151.259052,'Town2', 'Page1.aspx'],
[2, -34.028249, 151.157507,'Town3', 'Page1.aspx'],
[1, -33.80010128657071, 151.28747820854187,'Town4', 'Page1.aspx']
];
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, locations);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
function setMarkers(map, locations) {
debugger;
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
if (location != undefined) {
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: location[3],
zIndex: location[0]
});
}
var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
if (location != undefined) {
开发者_如何学JAVA var point = new google.maps.LatLng(location[1], location[2]);
latlngbounds.extend(point);
}
}
map.setCenter(latlngbounds.getCenter());
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
I was able to mark multiple points by altering how the points are marked. Points should be marked before being added to the map apparently. However I was unable to set multiple info windows. Only one info window is displayed no matter which marker is clicked. The udpated code is given below-
function setMarkers(map, locations) { for (var i = 0; i < locations.length; i++) { var location = locations[i]; if (location != undefined) { var latlngbounds = new google.maps.LatLngBounds(); var point = new google.maps.LatLng(location[1], location[2]);
latlngbounds.extend(point);
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: location[3],
zIndex: location[0]
});
var content = "<a href='" + location[4] + "'><strong>" + location[3] + "</strong></a>";
var infowindow = new google.maps.InfoWindow({
content: content
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: location[3]
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
map.setCenter(latlngbounds.getCenter());
}
}
加载中,请稍侯......
精彩评论