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);
        });
    }