Menu
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
463
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);
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With