How to wait for the google API maps to load before loading the google.maps.OverlayView derived class

Question

I have a separate label.js file in which I defined a custom overlay. As a prototype, it uses google.maps.OverlayView:

Label.prototype = new google.maps.OverlayView(); 

I am not sure where to place the script tags for this js file in my index.html file. If I put script tags under the Google Maps download tag as follows:

 .... <script async defer src="https://maps.googleapis.com/maps/api/js?... </script> <script src="js/label.js"></script> </body> </html> 

The label.js file loads immediately while the api maps are not loaded yet, causing an error.

I am currently resolving this by manually loading JS into my loaded map callbacks:

 function initMap() { gMap = new google.maps.Map(document.getElementById(strMapDivName), { center: {lat: 21, lng: 78}, mapTypeId: google.maps.MapTypeId.HYBRID, zoom: 6, heading: 90, tilt: 0 }); // Load label.js afterwards so we can be sure that the google maps api has loaded var fileref=document.createElement('script') fileref.setAttribute("type","text/javascript") fileref.setAttribute("src", "js/label.js") document.getElementsByTagName("head")[0].appendChild(fileref) } 

Is this the best way to solve this problem?

Answer 1

I think you are doing it well. If you want to be sure that the map object is ready, you can also use the idle event listener.

 google.maps.event.addListenerOnce(map, 'idle', function () { // map is ready }); 

Answer 2

Here is the general thing that I have done and works for me.

1) Define the function that you want to perform after loading Google maps

 function ToExecuteAfterLoaded() { // Doing something here /// console.log("Executing this function"); // per example // } 

2) standby function

 function WhenGoogleLoadedDo(fnt) { if(typeof google != 'undefined') fnt(); else setTimeout(function() {(function(fnt) { WhenGoogleLoadedDo(fnt) })(fnt)}, 500); // You can set timer as you wish // } 

3) Call ToExecuteAfterLoaded, like this, in a script

 WhenGoogleLoadedDo(ToExecuteAfterLoaded); 

Answer 3

How about wrapping your custom label using DOMContentLoaded?

  document.addEventListener("DOMContentLoaded", function(event) { Label.prototype = new google.maps.OverlayView(); }); 

Link: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Answer 4

Updating an old question; in React, I used the NPM module: load-google-maps-api

I began to bark at the tree of creation of this, before I realized that it exists and can save time.

It is about to load the map APIs in promise format, and therefore you can provide a callback function for after loading.

 loadGoogleMapsApi().then(function (googleMaps) { new googleMaps.Map(document.querySelector('.map'), { center: { lat: 40.7484405, lng: -73.9944191 }, zoom: 12 }) }).catch(function (error) { console.error(error) }) 

Answer 5

I know this is too late, but I use this code below

 var mapWaitCount = 0; var mapWaitMax = 5; function map_load(param1, param2, ...) { // if you need any mapWaitCount++; if(typeof google != 'undefined') { // your code here when google api map is fulle loaded } else if(mapWaitCount < mapWaitMax) { // this is just to log your attempt console.log('Waiting attempt #' + mapWaitCount); setTimeout(function() { map_load(); }, 1000); } else if(mapWaitCount >= mapWaitMax) { // to inform it failed after maximum attempt console.log('Failed to load google api'); } } map_load(param1, param2, ...) { // if you need any 

A timeout is used to wait for the download, and after several attempts it will be stopped