Google Maps API v3 adding an InfoWindow to each marker
NOTE: I'm using v3 of the Google Maps API
I'm trying to add an info window to each marker I put on the map. Currently I'm doing this with the following code:
for (var i in tracks[racer_id].data.points) {
values = tracks[racer_id].data.points[i];
point = new google.maps.LatLng(values.lat, values.lng);
if (values.qst) {
var marker = new google.maps.Marker({map: map, position: point, clickable: true});
tracks[racer_id].markers[i] = marker;
var info = new google.maps.InfoWindow({
content: '<b>Speed:</b> ' + values.inst + ' knots'
});
tracks[racer_id].info[i] = info;
google.maps.event.addListener(marker, 'click', function() {
info.open(map, marker);
});
}
track_coordinates.push(point);
bd.extend(point);
}
The problem is when I click on a marker it just displays the info window for the last marker added. Also just to be clear the info window appears next to the last marker not the marker clicked on. I'd imagine my problem is in the addListener portion but am not postitive. Any ideas?
You are having a very common closure problem in the for in
loop:
Variables enclosed in a closure share the same single environment, so by the time the click
callback from the addListener
is called, the loop will have run its course and the info
variable will be left pointing to the last object, which happens to be the last InfoWindow
created.
In this case, one easy way to solve this problem would be to augment your Marker
object with the InfoWindow
:
var marker = new google.maps.Marker({map: map, position: point, clickable: true});
marker.info = new google.maps.InfoWindow({
content: '<b>Speed:</b> ' + values.inst + ' knots'
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
This can be quite a tricky topic, if you are not familiar with how closures work. You may to check out the following Mozilla article for a brief introduction:
- Working with Closures
Also keep in mind, that the v3 API allows multiple InfoWindow
s on the map. If you intend to have just one InfoWindow
visible at the time, you should instead use a single InfoWindow
object, and then open it and change its content whenever the marker is clicked (Source).
You can use this
in event:
google.maps.event.addListener(marker, 'click', function() {
// this = marker
var marker_map = this.getMap();
this.info.open(marker_map);
// this.info.open(marker_map, this);
// Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
});