Come aspettare che l'API di google maps sia caricata prima di caricare una google.maps.OverlayView classe derivata

Question

Ho un file label.js separato in cui ho definito una sovrapposizione personalizzata. Esso utilizza il google.maps.OverlayView come il suo prototipo:

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

non sono sicuro dove collocare i tag di script per questo js file in mio file index.html. Se metto i tag di script sotto le mappe di Google caricamento tag in questo modo:

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

Il file label.js viene caricato immediatamente, mentre l'API di Google Maps non ha ancora caricato causando un errore.

Attualmente risolvere questo caricando manualmente il JS nelle mie mappe callback caricato:

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) 

} 

È questo il modo migliore per risolvere questo problema?

Answer 1

Penso che il modo in cui lo si fa va bene. Se si vuole essere sicuri che l'oggetto della mappa sia pronto, è anche possibile utilizzare il listener di eventi idle della mappa.

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

Answer 2

Ecco un generico che ho creato e funziona per me.

1) Definire la funzione che si desidera eseguire dopo le mappe di Google è caricato

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

2) funzione

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) Chiamare il ToExecuteAfterLoaded come questo nello script attesa

WhenGoogleLoadedDo(ToExecuteAfterLoaded); 

Answer 3

Che dire del wrapping dell'etichetta personalizzata con DOMContentLoaded?

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

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