Question

I am defining this class:

function GMap(map, marker, geocoder) {
    this.map = map;
    this.marker = marker;
    this.geocoder = geocoder;

    this.setMarker = function(address) {
        this.geocoder.geocode({'address' : address}, function(results, status) {
            map.setCenter(results[0].geometry.location);
            marker.setPosition(results[0].geometry.location);
        });
    }
}

How can you access the map and marker properties of GMap from the callback function?

Thanks a lot.

Answer 1

The Function object prototype has an “apply” method that you can use to set the context of “this” within a function. Check the API/code for whatever geocoder.code is, many libraries will handle this for you through an extra parameter, i.e.:

this.someObj.someFn(params, callback, scope);

Within someFn, it would use the callback similarly to this:

callback.apply(scope || window, [callbackArg1, callbackArg2]);

This would make the “this” context within “callback” whatever had been passed in as “scope”, or if nothing was passed in, “this” would be the global context of the window. Some javascript libraries also provide a way to create a callback function delegate that ensures the function is always called with the expected scope no matter where it ends up being called from. An example of this is ExtJS’s Function.createDelegate

If the library you are using doesn’t provide this as built in functionality, then you can create a local var to reference within your callback closure, i.e.:

this.setMarker = function(address) {
    var thisGMap = this;
    this.geocoder.geocode({'address' : address}, function(results, status) {
        thisGMap.map.setCenter(results[0].geometry.location);
        thisGMap.marker.setPosition(results[0].geometry.location);
    });
}