Prototype.js callback not firing

Question

I'm attempting to create a Google Earth controller for the Garmin DeviceControl browser plugin. I am modeling the behaviour around the existing Google MAPS controller, but the snag I've hit is that my second callback function is not being fired.

the code:

Garmin.GoogleEarthMapController = function(mapString){}; //just here for jsdoc
Garmin.GoogleEarthMapController = Class.create();
Garmin.GoogleEarthMapController.prototype = {
    initialize: function (mapString) {
        google.setOnLoadCallback(this.GEinit);
    },
    GEinit: function() {
            alert("call create");
            //This is a Google.js function and works when executed outside of prototype
            google.earth.createInstance(this.mapElementName, this.GEinitCallback, this.GEfailureCallback);
            alert("finished create instance");
    },
    GEinitCallback: function (instance) {
                alert("init called");
    },

    GEfailureCallback:function (errorCode) {
    }
}

All the necessary js includes are in the HTML, they're all valid and the target div exists. Running the code outside of my prototyped js class also produces the required results. What's happening in my prototyped class is that GEinitCallback is never executed. I get the "call create" alert and the "finished create instance" alert, but the "init called" alert never appears. I have no javascript errors.

Am I specifying my callback correctly? If not, how would I? The google.earth.createInstance function is defined in the Google Earth source file and is external to the controller.

Answer 1

You have a problem with scope - every time you hit a callback there is a possibility that you loose the definition of this. Try using the bind() on the callback to define what this is in the function context. I've noted the calls below. You can also simplify the class definition as well as below

Garmin.GoogleEarthMapController = Class.create({
    initialize: function (mapString) {
        // make sure you bind this call
        google.setOnLoadCallback(this.GEinit.bind(this));
    },
    GEinit: function() {
        alert("call create");
        //This is a Google.js function and works when executed outside of prototype
        //make sure you bind this call
        google.earth.createInstance(this.mapElementName, this.GEinitCallback.bind(this), this.GEfailureCallback.bind(this));
        alert("finished create instance");
    },
    GEinitCallback: function (instance) {
            alert("init called");
    },

    GEfailureCallback:function (errorCode) {
    }
});