Support the asynchronous maps API.

[JimBobSquarePants]

At present the script requires the core map code to be already present in the page which prevents asynchronous loading of maps whilst using the MapLabel function.

https://github.com/googlemaps/js-map-label/blob/gh-pages/src/maplabel.js#L44

It would be better, in my opinion, if the prototypical properties were copied from OverlayView on first
instance of the constructor getting initialised. That would allow someone to asynchronously load the map script and instantiate inheritance when calling new MapLabel for the first time.

function MapLabel(opt_options) {

    if (!MapLabel.prototype.setValues) {
        // Copy the properties over.
        for (var prop in google.maps.OverlayView.prototype) {
            MapLabel.prototype[prop] = google.maps.OverlayView.prototype[prop];
        }
    }

    this.set('fontFamily', 'sans-serif');
    this.set('fontSize', 12);
    this.set('fontColor', '#000000');
    this.set('strokeWeight', 4);
    this.set('strokeColor', '#ffffff');
    this.set('align', 'center');

    this.set('zIndex', 1e3);

    this.setValues(opt_options);
}

[broady]

I think we can just add

this.prototype = new google.maps.OverlayView; to the constructor.

@brendankenny wdyt?

[broady]

Wait no, that would override all of the other methods we've added already. Hm.

[JimBobSquarePants]

Assigning the prototype like that would happen too late. When you assign the prototype within the constructor, it's assigned after first instantiation. Copying the OverlayView properties to extend MapLabel is the simplest method I can think of.

[jborden]

JimBobSquarePants: Your solution works, thanks. Perhaps open a pull request?

[algodave]

I'm experiencing the same issue as @JimBobSquarePants
I need to load maps APIs asynchronously because I'm passing API key to it, which is a configuration param of my app.
👍 for a pull request.

[Bostermann]

I experienced the same error.
I loaded GoogleMapApi asynchronously with a callback function and an attribute defer.
A script dependant on GoogleMapApi was loaded without async and defer. This caused the error in the customized OverlayView: this.setMap is no function.
Adding the defer attribute to the script tag dependent of GoogleMapsApi solved the issue.
The main parts of my code:

    <script async defer type="text/javascript"
    src="https://maps.google.com/maps/api/js?language=de&amp;key=MyKey&amp;callback=initMap">
     </script>
    <script type="text/javascript" src="lib/routeMain.js" ></script>
    <script defer type="text/javascript" src="lib/markermanager.js"></script>

In routeMain.js:

function initMap() {
if (typeof console !== 'undefined' && typeof console.log !== 'undefined') {
console.log('GoogleMapsApi loaded.');
}
}
document.addEventListener('DOMContentLoaded', function () {
if (typeof console !== 'undefined' && typeof console.log !== 'undefined') {
console.log('+++main page was loaded.');
}
initialize();
}, false);
var map;
function initialize() {
var latlng = new google.maps.LatLng(51.31893, 9.49601); //Kassel, Germany
var myOptions = {
zoom: 7,
center: latlng,
mapTypeControl: true
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

[ankesh4040]

Any solution on this issue.
I tried using fhackenberger 's edited code. But now I am getting error :- Uncaught ReferenceError: MapLabel is not defined