Question

I am new to mootools and Google Maps API V3 and I am facing the following problem:

My goal is to create a base class for representing a generic button and subclasses with different “click” event handlers for adding markers, polygons and polylines.
Therefore using mootools, I create a base class with the basic appearance properties and three subclasses with different “click” event handlers.
The buttons appear ok but when I click one it says that the property is undefined. Is it a scope issue? How can I reform the code to call the right method?

var GButton = new Class({    
    initialize: function(divObj, mapObj){
        this.div = divObj;
        this.map = mapObj;
        this.controlUI = document.createElement('DIV');
        this.controlUI.style.backgroundColor = 'white';
        this.controlUI.style.borderStyle = 'solid';
        this.div.appendChild(this.controlUI);
        this.controlText = document.createElement('DIV');
        this.controlText.style.fontFamily = 'Arial,sans-serif';
        this.controlUI.appendChild(this.controlText);
    }
});
//mootools 1.1
var GButtonMarker = GButton.extend({
    initialize: function(divObj, mapObj){
        this.parent(divObj, mapObj);
        this.controlUI.title = 'Click to add new marker';
        this.controlText.innerHTML = 'New Marker';
        google.maps.event.addDomListener(this.controlUI, 'click', this.updateControl);
    },
    //just to represent that it is pressed
    updateControl: function(){
        this.controlUI.style.backgroundColor = 'LightGrey'; //problem here! this.controlUI UNDEFINED! (while it is defined of course...)
        this.controlText.style.fontWeight = 'bold';
    } 
});

Answer 1

you need to bind the class instance to the callback:

google.maps.event.addDomListener(this.controlUI, 'click', this.updateControl.bind(this));

this is a mootools wrapper, btw, not the google one (if there is such).