Dynamic google map InfoWindow loading content of last record in loop
I'm having an issue where the content in my popup (when marker clicked) is showing the content of my last record.
I found a bit of help here, but I'm still having issues.
here's my code
collection.js
[
{
"lat": "-25.363882",
"lng": "131.044922",
"category": "cat1",
"title": "Heading #1",
"description": "desc1",
"imageurl": "http://ursispaltenstein.ch/blog/images/uploads_img/national_geographic_wallpaper_1.jpg",
"pageLink": "http://www.google.com"
},
{
"lat": "-26.363882",
"lng": "200.044922",
"category": "cat2",
"title": "Heading #2",
"description": "desc2",
"imageurl": "http://www.creativepics.org/wp-content/uploads/2009/10/National-Geographic-Wallpapers-002.jpg",
"pageLink": "http://www.google.com"
}
,
{
"lat": "-28.363882",
"lng": "81.044922",
"category": "cat3",
"title": "Heading #3",
"description": "desc3",
"imageurl": "http://blog.rapidsea.com/wp-content/uploads/2008/03/20080316-bora-bora-national-geographic.jpg",
"pageLink": "http://www.google.com"
}
]
page javascript
var pointMap = { map: null }
$(function () {
pointMap.init('#map_canvas', new google.maps.LatLng(0, 0), 2);
pointMap.placeMarkers('collection.js');
});
pointMap.init = function (selector, latLng, zoom) {
var myOptions = {
zoom: zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.HYBRID
}
this.map = new google.maps.Map($(selector)[0], myOptions);
}
pointMap.placeMarkers = function (filename) {
$.getJSON(filename, function (data) {
for (var x = 0; x < data.length; x++) {
var location = data[x];
var point = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
var marker = new google.maps.Marker({
position: point,
map: pointMap.map,
title: location.title
});
var popupContent = '<div id="locationContent">' +
'<div>' + location.category + '</div>' +
'<div>' + location.title + '</div>' +
'<div>' + location.description + '</div>' +
'<div><a href="' + location.pageLink + '">See This Story >></a></div>' +
'<div><img width="250" src="' + location.imageurl + '" /></div>' +
'</div>';
var infoWindow = new google.maps.InfoWindow();
开发者_运维技巧 google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(popupContent);
infoWindow.open(pointMap.map, this);
});
}
});
}
html
<!DOCTYPE html>
<html>
<head>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// javascript from above
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
The markers all load in the correct places and windows all open in the correct places, but the content loaded in the InfoWindow (popupContent) is of my last record for all the markers.
thanks for any help
So i've instead pushed the creation of the infoWIndow to a separate function instead of in the loop, and it seems to work.
updated code
pointMap.placeMarkers = function (filename) {
$.getJSON(filename, function (data) {
for (var x = 0; x < data.length; x++) {
var location = data[x];
var point = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));
var marker = new google.maps.Marker({
position: point,
map: pointMap.map,
title: location.title
});
var popupContent = '<div id="locationContent">' +
'<div>' + location.category + '</div>' +
'<div>' + location.title + '</div>' +
'<div>' + location.description + '</div>' +
'<div><a href="' + location.pageLink + '">See This Story >></a></div>' +
'<div><img width="250" src="' + location.imageurl + '" /></div>' +
'</div>';
createInfoWindow(marker, popupContent);
}
});
}
var infoWindow = new google.maps.InfoWindow();
function createInfoWindow(marker, popupContent) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(popupContent);
infoWindow.open(pointMap.map, this);
});
}
加载中,请稍侯......
精彩评论