google maps api v3: infowindows distorted

Question

When I plug in values for x instead of using a for loop, this code works. But when I use the for loop, the infowindow shows up distorted on the left side of the screen.

What the heel!

for (var x = 0; x < data.page_size; x++) {

 var position = new google.maps.LatLng( data.events.event[x]['latitude'], data.events.event[x]['longitude']); marker.push( new google.maps.Marker({ position: position, map: map, icon: image} )); google.maps.event.addListener(marker[x], 'click', function() { infowindow.setContent(content[x]); infowindow.open(map, marker[x]); }); 

}

Answer 1

You must use the closure in this case. Like this:

(function(m,c){
    google.maps.event.addListener(m, 'click', function() {
        infowindow.setContent(c);
        infowindow.open(map, m);
    });
})(marker[x],content[x])

Answer 2

An economical way to approach this is to make the marker aware of its own index at the cost of just one Number property per marker, and avoiding the need to form a set of closures containing copies of content[x] .

for (var x = 0; x < data.page_size; x++) {
    ...
    marker[x].x = x;//make the marker aware of its own index
    google.maps.event.addListener(marker[x], 'click', function() {
        infowindow.setContent(content[this.x]);
        infowindow.open(map, this);
    });
}

Providing the marker array and the content array remain static, or are compatibly managed, then this.x will reliably pull out the correct content for each marker.