In the Google Maps API, how do I insert multiple markers with multiple info windows?
I am using the Google Maps API v3. I have a map taking up the whole page with custom markers on it. I want each marker to, when clicked upon, open an info window containing a link to a webpage pertaining to that location. But, all of the markers show the same content in the info window, even though I specified otherwise. Here is my code, could you please try to fix it? All the info windows show the content of my last specified declaration. I just pasted all of the code here, as I may have made a mistake anywhere. Thanks...
<!doctype html>
<head>
<title>L4H Expansion</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
a {
color: #8c4e94;
text-decoration: none;
}
p {
line-height: 1.8;
margin-bottom: 15px;
font-family: 'georgia', serif;
font-size: 14px;
font-weight: normal;
color: #6d6d6d;
}
#map_canvas {
height: 100%;
}
#header {
background: url('http://static.tumblr.com/asviked/Cqklq72up/header.png') top center repeat-x;
height: 105px;
b开发者_开发问答order-bottom: 1px solid #e0e0dc;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 99;
}
#headercon {
width: 900px;
margin: 0 auto;
}
#headerwrap {
background: url('http://static.tumblr.com/asviked/dzAlqx6kq/title.png') top left no-repeat;
width: 900px;
overflow: hidden;
height: 100px;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var Manassas = new google.maps.LatLng(38.751272,-77.475243);
var London = new google.maps.LatLng(51.611544,-0.178072);
var Richmond = new google.maps.LatLng(37.543216,-77.468376);
var Harrisonburg = new google.maps.LatLng(38.451841,-78.868961);
var myOptions = {
zoom: 4,
center: Manassas,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: Manassas,
map: map,
title:"Linux4Hope Manassas VA",
icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png'
});
var infowindow = new google.maps.InfoWindow({
position: Manassas,
content: '<p><a href="http://www.linux4hope.org">Linux4Hope, Manassas VA, USA</a></p>'
});
google.maps.event.addListener(marker, 'click', function() {
position: Manassas,
infowindow.open(map, this);
});
var marker = new google.maps.Marker({
position: London,
map: map,
title:"Linux4Hope UK",
icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png'
});
var infowindow = new google.maps.InfoWindow({
position: London,
content: '<p><a href="http://www.linux4hope.org.uk">Linux4Hope, London, United Kingdom</a></p>'
});
google.maps.event.addListener(marker, 'click', function() {
position: London,
infowindow.open(map, this);
});
var marker = new google.maps.Marker({
position: Richmond,
map: map,
title:"Linux4Hope Richmond VA",
icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png'
});
var infowindow = new google.maps.InfoWindow({
position: Richmond,
content: '<p><a href="http://www.linux4hope.org">Linux4Hope, Richmond VA, USA</a></p>'
});
google.maps.event.addListener(marker, 'click', function() {
position: Richmond,
infowindow.open(map, this);
});
var marker = new google.maps.Marker({
position: Harrisonburg,
map: map,
title:"Linux4Hope Harrisonburg VA",
icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png'
});
var infowindow = new google.maps.InfoWindow({
position: Harrisonburg,
content: '<p><a href="http://www.linux4hope.org">Linux4Hope, Harrisonburg VA, USA</a></p>',
});
google.maps.event.addListener(marker, 'click', function() {
position: Harrisonburg,
infowindow.open(map, this);
});
}
</script>
</script>
</head>
<body onload="initialize()">
<div id="header">
<div id="headercon">
<a href="http://www.linux4hope.org">
<div id="headerwrap">
</div>
</a>
</div>
</div>
<div id="map_canvas"></div>
</body>
</html>
You'll need to use different names for marker and infowindow , otherwise you will overwrite them.
I would suggest to use an array to store the informations(latlng,title,content) and create the markers/windows inside a loop.
The problem here is that you reuse the variables. Your click event handlers are all anonymous functions which are not called until the event occurs. When the functions are called, they close over the scope of the functions encapsulating them. Because you reuse the variable names, the values for all but the last infowindow is overwritten, and thus only that infowindow appears.
You could create separate variables for each location:
var marker1,infowindow1,marker2,inforwindow2, ...
...and assign them accordingly, but a much better approach would be to create a datastructure of positions and corresponding infowindows.
var locations = {
'London' : {
marker : new google.maps.Marker({ ... }),
inforwindow : new google.maps.InfoWindow({ ... });
},
'Manassas' : { ... }
Now you can traverse the datastructure and connect each marker and infowindow on the way.
This happens because the time the event handlers are fired all the infowindow variables point to the same object. There are some quick fixes, you could just rename the variables (something like infowindow1, infowindow2...), add a few more closures:
(function(){
var marker = new google.maps.Marker({
position: London,
map: map,
title:"Linux4Hope UK",
icon: 'http://static.tumblr.com/asviked/U1flr229o/marker.png'
});
var infowindow = new google.maps.InfoWindow({
position: London,
content: '<p><a href="http://www.linux4hope.org.uk">Linux4Hope, London, United Kingdom</a></p>'
});
google.maps.event.addListener(marker, 'click', function() {
position: London,
infowindow.open(map, this);
});
})();
or
google.maps.event.addListener(marker, 'click', function(iw){
return function() {
iw.open(map, this);
};
}(infowindow)
});
加载中,请稍侯......
精彩评论