Home/ Questions/Q 3306210
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T21:15:42+00:00

I have the following code: <!DOCTYPE html> <html> <head> <script src=http://code.jquery.com/jquery-latest.min.js></script> <meta name=viewport content=initial-scale=1.0,

  • 0

I have the following code: 

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        function initialize() {
            var cities = {{json|safe}};

            /*
            for (i in cities) { // 0, 1
                // document.write(cities[i]['fields']['name'] +'<br />');
                document.write(cities[i]['fields']['x'] +'<br />');
                document.write(cities[i]['fields']['y'] +'<br />');
                document.write('<br />');
            } /* */

            var center = new google.maps.LatLng(-22.784791,-45.088806);
            var myOptions = {
                zoom: 8,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            var citiesLoc = new Array();
            // var flightPlanCoords = new Array();
            var infoBoxes = new Array();
            var markers = new Array();

            for (var i in cities) {
                // document.write(cities[i]['fields']['name'] );
                citiesLoc[i] = new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']);

                // flightPlanCoords.push(new google.maps.LatLng(cities[i]['fields']['x'],cities[i]['fields']['y']));

                infoBoxes[i] = new google.maps.InfoWindow({
                    content: "<div>" + cities[i]['fields']['name'] + "</div>"
                });

                markers[i] = new google.maps.Marker({
                    position: citiesLoc[i],
                    map: map,
                    title: cities[i]['fields']['name']
                });


                google.maps.event.addListener(markers[i], 'click', function() {
                    infoBoxes[i].open(map, markers[i]);
                });


            };




            // document.write(infoBoxes[1]['content']);
            /*
            var flightPath = new google.maps.Polyline({
                path: flightPlanCoords,
                strokeColor: "#0000ff",
                strokeOpacity: 1.0,
                strokeWeight: 5
            });
            flightPath.setMap(map);
             */
        }

    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Which sets up two markers with two infowindows attached, but when I click either one, only one of them (number 1 of 2, zero-indexed) shows up. If I write it like this:

 google.maps.event.addListener(markers[0], 'click', function() {
                infoBoxes[0].open(map, markers[0]);
            });
            google.maps.event.addListener(markers[1], 'click', function() {
                infoBoxes[1].open(map, markers[1]);
            });

then it works just fine. What am I missing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When infoBoxes[i].open(map, markers[i]); is evaluated inside you function it will take the updated value of i, the one after the loop ends, i.e. 1.

    Just do an alert(i) in there to see that this happens.

    Here’s a crude fix (tested and working):

    markers[i]._index = i;
google.maps.event.addListener(markers[i], 'click', function() {
    infoBoxes[this._index].open(map, markers[this._index]);
});

    You should probably read more here http://code.google.com/apis/maps/documentation/javascript/events.html . I know it’s a lot to read, but it’s sometimes necessary.

    • 0