tags:

views:

23

answers:

2
Q: 

Google Maps API - unable to set several infoWindows on several markers.

I have the following code: 

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
    <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"&gt;
    </script>
    <script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
    <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?

A: 

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.

Alin Purcaru  2010-10-22 16:56:53
er... and how do I fix it, please?
Victor Piousbox  2010-10-22 16:58:25
Did you try my proposed fix?
Alin Purcaru  2010-10-22 17:11:24
I tried but it didn't work... I'm reading that document now.
Victor Piousbox  2010-10-22 17:58:07
Found some time to actually debug it. I was close with my guess. You have the clicked marker in the `this` variable.
Alin Purcaru  2010-10-22 19:32:29
A: 

I really don't know what the problem is... this question is still unanswered. however this trick works: I create two more counters and use and increment them inside my loop. I really don't know why this should work, and this is not the way to program, but here goes.

            counter1 = 0;
            counter2 = 0;
            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[counter1++].open(map, markers[counter2++]);
                });

            };
Victor Piousbox  2010-10-22 19:34:52
What in Gods name are you doing with those counters? They don't make any sense at all. Did you test them? They are in no way connected to the markers you click on. They just get incremented at each click. At the 3rd click you get an error. Why are there two of them? They get incremented both at the same time. Did you try my solution? It works you know.
Alin Purcaru  2010-10-22 21:35:00
wtf?! I rest in shame. my stuff is wrong of course, but I'm even more surprised that your solution does work. Can you explain this to me or point me to appropriate resources? Specifically, what is the relation between markers[i]._index and this._index, and what are the scopes of variables the way you fixed them?
Victor Piousbox  2010-10-29 18:12:31

related questions

What's safe for a C++ plug-in system?
Timezone lookup from latitude longitude
Working with Common/Utility Libraries
Best Screencasting Program For Windows That Has An API
Notification API for windows
Error handling / error logging in C++ for library/app combo
Who provides a WHOIS API?
Spread vs MPI vs zeromq?
How should I build a good (web) API
How do I recover from an unchecked exception?
Protecting API Secret Keys in a Thick Client application
How do I find the 'temp' directory in Linux?
Best practices for development environment and API dev?
How to detect which blog API
Where do I find information about Blog APIs and how to use them?
Javascript Load Order
How do you spawn another process in C?
Google Analytics Access with C#
Parameter Binding: What happens under the hood?
Picasa Plugin
Is there an API that allows you to find out how many sites link to yours?
Is there any kind of non text interface to MySQL?
looking for a GPS with a good API
API Yahoo India Maps
GUI Programming APIs