Best way to extend Google Maps API v3 Classes

You can use version A and later in your code you can append the initMap callback in your main.js file. IN this way you'll have to use ajax calls to apply yout callback function.

Otherwise you'll have to use option B from the start, and define the initMap function in your main.js file.

You should also load the google maps api in async mode:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>

Documentation and example: https://developers.google.com/maps/documentation/javascript/examples/map-simple


The documentation describes the following way top extend maps classes:

The MVCObject constructor is guaranteed to be an empty function, and so you may inherit from MVCObject by simply writing MySubclass.prototype = new google.maps.MVCObject();

And

Inherit from this class by setting your overlay's prototype: MyOverlay.prototype = new google.maps.OverlayView();. The OverlayView constructor is guaranteed to be an empty function.

So the (one possible) option C would be to define your classes separately and then only configure the inheritance inside the initMap:

function initMap() {

  Alpha.prototype = new google.maps.MVCObject();
  Bravo.prototype = new google.maps.MVCObject();
  ...
}

Or, even better, to keep everything together, you can have some bootstrap function inside your library file, so in the initMap you would just do this:

// in my_library.js:
// For now we don't mention that our class extends MVCObject
function Alpha() {
    console.log('Constructed Alpha');
    this.my_method = function() {
       // the `parent_method` can be defined in the
       // prototype we assign later
       this.parent_method();
    }
}

function Bravo() {
    console.log('Constructed Alpha');
}    

// The function to dynamically subclass our classes.
function init() {
   Alpha.prototype = new google.maps.MVCObject();
   Bravo.prototype = new google.maps.MVCObject();
}

// The callback for google maps script.
function initMap() {
    // invoke the `init` from my_library.
    my_library.init();;
}

The above uses instance methods (we define Alpha methods inside the constructor), alternatively we could define the constructor without methods, immediately create the instance and define the methods on it:

function Alpha() {
    console.log('Constructed Alpha');
}

var alpha = new Alpha();
alpha.my_method = function() {
   this.parent_method();
}

// The function to dynamically subclass our classes.
function init() {
   alpha.prototype = new google.maps.MVCObject();
}

To create more Alpha instances, we can clone the existing alpha object.

One more alternative is to define own object using the prototype and then use Alpha.prototype.prototype = MVCObject construct:

function Alpha() {
    console.log('Constructed Alpha');
}

Alpha.prototype.my_method = function() {
   this.parent_method();
}

// The function to dynamically subclass our classes.
function init() {
   // We can not overwrite Alpha.prototype as we will loose
   // the methods we defined, so we assign the prototype of
   // the prototype
   Alpha.prototype.prototype = new google.maps.MVCObject();
}