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.

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.

• javascript

4 Answers 4

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);
    });
}

Is this what you're looking for?

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

    var currentGMap = this; // private variable bound to GMap constructor scope

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

Note: map and marker are also bound through a closure, though I assume you want to be able to change the map and marker properties after you created your GMap instance.

Edit: yeh, I see Kevin also awnsered this before me in the last part of his awnser.

I'm guessing its a google map? Why are you passing through the map and the marker at all? Make them global variables (ie: put var map; OUTSIDE of all functions) then you should be able to access them from anywhere.

Its also a bad idea to reuse variable names within functions. If you've passed them into the function in the first place then they will bee function variables, so defining map, marker and geocoder in your function is pointless as you will already be able to access them by using map, marker and geocoder. :)

if you are using jQuery, there's a method called $.proxy() that you can use for change the context (set the "this" of a function to whatever you want).

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