I have a problem where the contents of my popup (when I click a marker) shows the contents of my last entry.
I found a little help here , but I still have problems.
here is 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"> </script> </head> <body> <div id="map_canvas"></div> </body> </html>
Markers are loaded in the right places and all windows open in the right places, but the content loaded in InfoWindow (popupContent) has my last entry for all markers.
thanks for any help