Question

I’m trying to create a custom javascript class that inherits from google.maps.Map (V3 API).
Here’s the code:

function MyClass(domElem, options){
    google.maps.Map.call(this, domElem, options);
    var custom_var = new google.maps.MVCArray();
    this.getCustomVar = function(){ return custom_var };
}
MyClass.prototype = new google.maps.Map;
MyClass.prototype.constructor = MyClass;

This code throws a console error like:

Uncaught TypeError: Cannot read property 'offsetWidth' of undefined

I’ve already tried to put this in setTimeout with 5 sec delay, but I think the DOM element is not the problem (Because it works when I do the same with pure google.maps.Map contructor).

Thanks…

Answer 1

Here is a correct way of inheriting ‘classes’ in javascript:

goog.inherits = function(childCtor, parentCtor) {
   /** @constructor */
   function tempCtor() {};
   tempCtor.prototype = parentCtor.prototype;
   childCtor.superClass_ = parentCtor.prototype;
   childCtor.prototype = new tempCtor();
   childCtor.prototype.constructor = childCtor;
};

So you can try something like:

function MyClass(domElem, options){
   google.maps.Map.call(this, domElem, options);
   var custom_var = new google.maps.MVCArray();
   this.getCustomVar = function(){ return custom_var };
}
goog.inherits(MyClass, google.maps.Map);