Google Maps Trouble: Closures & Passing By Reference

Question

I\'m having some Google Maps/Javascript problems. I think I know what the trouble is but just don\'t know a way round it.

An example of my problem is here. Whateve

Answer 1

Change this:

google.maps.Event.addListener(marker, infoAction, function() {
      alert(marker.value);
      map.openInfoWindowHtml(point, getResultInfoContent(marker.value));
    });

to this:

google.maps.Event.addListener(marker, infoAction, (function(marker, point, map) { return function() {
      alert(marker.value);
      map.openInfoWindowHtml(point, getResultInfoContent(marker.value));
    }})(marker, point, map));

This will create the closure you want.

Split out for clarity:

var f = function(marker, point, map)
{
    return function()
    {
        alert(marker.value);
        map.openInfoWindowHtml(point, getResultInfoContent(marker.value));
    }
}

google.maps.Event.addListener(marker, infoAction, f(marker, point, map));

Answer 2

The above answer is not very intuitive though - as Greg said.

When you add an event to an object, that object is passed down so you can access it by "this" within the closure. If you replaced "marker.value" with "this.value" your problem would have been resolved. If you need to pass down more stuff, you tie it to the object and pass it down:

marker.a = 1
marker.b = 2
marker.c = 3

Within the closure this.a will be 1 and so on..