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