Can someone clarify the my understanding of variable scope within event handlers? Take a look at the code below:
var address = new Array();
address[0] = '1 Smith Street';
address[1] = '2 Smith Street';
for(var rownum=0; rownum<=address.length; rownum++)
{
if(address[rownum])
geocoder.geocode( {'address': address[rownum]}, geocodeCallBack);
}
function geocodeCallBack(results, status)
{
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: results[0].formatted_address
});
google.maps.event.addListener(marker, 'click', function(){
var infowindow = new google.maps.InfoWindow({
content: marker.title
});
// how come this event handler knows the marker variable references the marker variable declared about 10 lines above?
infowindow.open(map, marker);
});
}
For most people, this code seems straight-forward. It plots two markers on google maps. When you click on the first marker, it shows the address '1 Smith Street'. When you click on the second marker, it shows the address '2 Smith Street'.
Ok so my question is: how come BOTH markers don't show '2 Smith Street'?
In the past, I've looped through arrays of objects and bound event handlers to each object. In the event handler code itself, I would try to re-reference the corresponding object in the array, which is outside of the scope of the event handler. Thus, at the end of page load, the event handler for ALL objects referenced the LAST element in the loop. How come my sample geocode above didn't experience the same problem?
Forgive me if I'm not articulating the problem well. It is because very confused about the situation. I can't seem to get my head wrapped around variable scope with event handlers.....if someone can help me clarify, that would be great.
Additional Info/Confusion
Another thing...the variable var marker
was instantiated in the scope of geocodeCallBack()
. Isn't the marker destroyed by the time a user triggers google.maps.event.addListener(marker, 'click', function(){})
during run time? In which case, I should get some kind of undefined error?