Best way to extend Google Maps API v3 Classes

Question

A number of the classes in Google Maps API v3 can be extended, specifically google.maps.MVCObject and google.maps.OverlayView.

In some of the examples, they will extend a class in the callback function initMap. My application is more robust than those examples and would prefer not to define a bunch of classes in the callback function.

Is the solution to (A) include Google Maps API before my own script and not include a callback function? Or (B) do I just define everything in the callback function? Or (C) some other approach.

Option A

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script src="./assets/js/main.js" type="module"></script>

Option B

<script src="./assets/js/main.js" type="module"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>

Where initMap is in main.js and looks something like this:

function initMap() {

  class Alpha extends google.maps.MVCObject {}
  class Bravo extends google.maps.MVCObject {}
  class Charlie extends google.maps.MVCObject {}
  // More classes.
  class Zulu extends google.maps.MVCObject {}

  // Rest of code.

}

Option C

Some other approach.

Answer 1

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

Answer 2

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