InfoWindow Loop retrieves only last element of Array

[calibanter]

Hi. Forgive me. I know this is a JavaScript challenge and not a
Google Maps challenge. I have Google Maps v3 and I have arrays that
loop for marker locations and for InfoWindows. The marker locations
work out just fine. But for the life of me I can't sort out the
JavaScript loop for the InfoWindows. Right now my InfoWindows all
return the last element in the array. I expect this has something to
do either with JS global variables OR JS closure challenges. If a JS
whiz can take a look and help me with a solution, I could not be more
grateful. Thank you. Here's the code:

function initialize() {
var map_center = new google.maps.LatLng(0,0);
var myContent = new Array('Desc1', 'Desc2', 'Desc3', 'Desc4');
var myLocations = new Array();
var myResNames = new Array('Amber Lea Place', 'Charlotte Villa',
'Tranquility Place', 'Versa Care Retirement Community');
myLocations = [
new google.maps.LatLng(43.1567732,-80.2740597),
new google.maps.LatLng(43.1404795,-80.2616147),
new google.maps.LatLng(43.1789781,-80.3246834),
new google.maps.LatLng(43.1793855,-80.2489434)
];
var myOptions = {
zoom: 12,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

var info = new google.maps.InfoWindow();

for(var i=0;i<myLocations.length;i++)
{
markers[i] = new google.maps.Marker({
position: myLocations[i],
map: map,
title: myResNames[i]
});
var ContentID = myContent[i];

google.maps.event.addListener(markers[i], 'click',
function() {
info.setContent(ContentID);
info.open(map, this);
});
bounds.extend(myLocations[i]);
map.fitBounds(bounds);
}


}
</script>

[Rossko]

>                 var ContentID = myContent[i];
>
> google.maps.event.addListener(markers[i], 'click',
> function() {
>          info.setContent(ContentID);

You're not getting closure on ContentID. When the loop finishes,
ContentID is set to the last item. Later, when any of the click
listeners are triggered, they all use the same ContentID.

See this example
http://code.google.com/apis/maps/documentation/javascript/examples/event-closure.html
the important feature is removing the listener creation to a seperate
function, which allows for function closure on the content. It's not
an easy concept.

[calibanter]

Thanks Rossko. Yes, that's done the trick. I knew it was something
like that. For the edification of anyone with a similar challenge,
here is the working code. Thanks again.


<script type="text/javascript">
var map;
var markers = new Array();

bounds.extend(myLocations[i]);
map.fitBounds(bounds);

attachInfo(markers[i], i); // call function outside of loop
} // end for loop

function attachInfo(marker, number) {
var infowindow = new google.maps.InfoWindow(
{ content: myContent[number]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);

});
} // end attachInfo

} // end initialize

On Jun 1, 4:28 pm, Rossko <ros...@culzean.clara.co.uk> wrote:
> >                 var ContentID = myContent[i];
>
> > google.maps.event.addListener(markers[i], 'click',
> > function() {
> >          info.setContent(ContentID);
>
> You're not getting closure on ContentID.  When the loop finishes,
> ContentID is set to the last item.  Later, when any of the click
> listeners are triggered, they all use the same ContentID.
>

> See this examplehttp://code.google.com/apis/maps/documentation/javascript/examples/ev...