Trying to bind multiple InfoWindows to multiple Markers on a Google Map and failing

My project uses a JSON feed to grab info about earthquakes within a specified latitude and longitude boundary, essentially making a box. I take this info and turn all the results into markers on a Google map. I need each marker to also display some additional information, so I'm trying to use the built in InfoWindow objects such that when you click on a marker you open up the tooltip with some information associated with that marker. However I'm finding that no matter what marker I click, the same infowindow always comes up above the same marker of that group, and I believe it is always the last infowindow created in my loop. Here's the code.

$.getJSON(url, function(json) {
                    for(var i = 0; i < json.earthquakes.length; i++)
                    {
                        var pos = new google.maps.LatLng(json.earthquakes[i].lat, json.earthquakes[i].lng);
                        var info = json.earthquakes[i].lat + ", " + json.earthquakes[i].lng;
                        var marker = new google.maps.Marker({
                            map: map, 
                            position: pos,
                            title: json.earthquakes[i].eqid
                        })
                        var tooltip = new google.maps.InfoWindow({
                            content: info
                        })
                        google.maps.event.addListener(marker, 'click', function() {
                            tooltip.open(map, marker);
                        });
                        markers.push(marker);
                        tooltips.push(tooltip);
                    }               
                });

markers is an array for all the marker objects on the map and tooltips is another array for storing the infowindows objects. They're global.

Answers:

Answer

This is a very common question in the google-maps tag and an easy mistake to make :).

What is happening is that your click event is being called asynchronously and it is picking up the current value in the marker variable in the getJSON callback (the last one in the list).

You need to wrap your addListener call in a function so that a closure is created around the marker variable that is being used in the click callback:

function listenMarker (marker)
{
    // so marker is associated with the closure created for the listenMarker function call
    google.maps.event.addListener(marker, 'click', function() {
                        tooltip.open(map, marker);
                    });
}

Then call listenMarker from your main getJSON callback (where you are currently calling addListener).

Answer

YOu can also do this:

// so marker is associated with the closure created for the listenMarker function call
google.maps.event.addListener(marker, 'click', function() {
                    tooltip.open(map, this);
                });

Where "marker" is replace with "this" in the add listener call. Thus you can place the addListerner code at the same point you create the marker, and not have to create a new function.

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

Check out the full solution and a demo :D

Answer

Placing the addListener call into its own function also solves the problem of multiple infowindows all displaying the same text.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.