Question

I’m using Google Maps API on my web page. I’m try to add multiple markers to the page with info windows. The markers get added ok, but the info windows all have the info for the last marker. any ideas?

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="http://testserver/se1/WebServices/ShelterWebService.asmx" />
        </Services>
    </asp:ScriptManager>

                <asp:LinkButton ID="BtnHome" runat="server" onclick="BtnHome_Click">Home</asp:LinkButton>

<div id="map_canvas"></div>

<script type="text/javascript">
    var geocoder;
    var map;
    var addresses;

    function GetShelters() {
        ShelterExpress.WebServices.ShelterWebService.GetShelters('', OnGetSheltersComplete);
    }

    function OnGetSheltersComplete(retValue) {
        addresses = new Array();

        for (x in retValue) {
            addresses.push(retValue[x]["Address"]);
        }

        GenerateMap();
    }

    function GenerateMap() {
        /* Create the geocoder */
        geocoder = new google.maps.Geocoder();
        /* Some initial data for the map */
        mapOptions = {
            zoom: 10
        , center: new google.maps.LatLng(0, 0)
        , mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        //var infowindow = new google.maps.InfoWindow();
        var marker, i;

        if (geocoder) {
             for (var item in addresses){
                geocoder.geocode({ 'address': addresses[item] }, function(results, status) {

                    if (status == google.maps.GeocoderStatus.OK) {
                        /* Position the map */
                        map.panTo(results[0].geometry.location);
                        /* Put a marker */
                        marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            title: addresses[item]
                        });

                        var infowindow = new google.maps.InfoWindow({ content: addresses[item] });
                        infowindow.open(map, marker);

                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.open(map, marker);
                        });
                    }
                });
            }
        }    
    }

    $(document).ready(function() {

        GetShelters();                
    });

Answer 1

I’m guessing that you’ve copied an object or an array. You’ll need to provide more information on addresses[item]

In javascript, copying something like a string or a boolean gives an actual copy, but copying an object or an array only gives a reference.

var foo = [1, 2, 3];
var bar = foo;
bar[1] = 5;
alert(foo[1]);
// alerts 5

EDIT FOR NEW INFORMATION: If you have jQuery loaded, a quick way to clone JS objects is to use $.extend()

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

for an array you could just use javascript’s slice()

a = [1];
b = a.slice();

It will depend on what retValue[x][“Address”] IS and which libraries you have loaded.