Come verificare se l'API di Google Maps è stata caricata?

Question

Come verificare se l'API di Google Maps (v3) è stata caricata?

Non voglio eseguire script di mapping se l'API non è stata caricata a causa di problemi di connettività Internet (la pagina Web è ospitata localmente).

Answer 1

if (google.maps) {...} ti darà un errore di riferimento se google non è definito (vale a dire se l'API non ha caricato).

Utilizzare invece if (typeof google === 'object' && typeof google.maps === 'object') {...} per verificare se è stato caricato correttamente.

Answer 2

Si potrebbe considerare l'uso del Google Loader

google.load("maps", "3", {callback: myFn}); 

Sarà caricare il file designato javascript, quindi eseguire il callback, specificato nell'argomento optionalSettings.

Answer 3

Credo che lo si possa fare con un if(google && google.maps){ … }, a meno che non si intenda ciò che si trova in this post, che riguarda Maps API V2, ma qualcuno lo ha aggiornato per v3 here.

Answer 4

MODIFICA: Se non si teme di essere "non esplicito", è possibile utilizzare il seguente, altrimenti se non si è sicuri se ci sarà una sola istanza della variabile google, utilizzare la risposta di DaveS.

Verificare se google maps API V3 caricato:

if(google && google.maps){ 
    console.log('Google maps loaded'); 
} 

in questa condizione variabile google userà javascript verità così se sarà funzione o di un oggetto o di una stringa diventerà vero e poi cercherà di accesso maps all'interno di quell'oggetto

E inversa:

if(!google || !google.maps){ 
    console.log('Not loaded yet'); 
} 

Answer 5

in asincrona caricando questo uno funziona per me (Grazie a Daves):

function appendBootstrap() { 
    if (typeof google === 'object' && typeof google.maps === 'object') { 
     handleApiReady(); 
    } else { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady"; 
     document.body.appendChild(script); 
    } 
} 

function handleApiReady() { 
    var myLatlng = new google.maps.LatLng(39.51728, 34.765211); 
    var myOptions = { 
     zoom: 6, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 

Answer 6

Un semplice controllo if(google && google.maps) non ha funzionato per me; Ho ancora un errore quando provo ad accedere all'API:

TypeError: google.maps.LatLng is not a constructor

Nel mio caso questo è probabilmente dovuto ai miei gestori di eventi del mouse viene attivato prima della API di Google Maps ha anche scaricano finito.In questo caso, per controllare in modo affidabile se mappe è caricato, creo un alias "Gmaps" e inizializzare su dom pronto (utilizzando jQuery):

var gmaps; 
$(function() { 
    gmaps = google.maps; 
}); 

poi nei miei gestori di eventi posso usare semplicemente:

if(gmaps) { 
    // do stuff with maps 
} 

Answer 7

provare

(google && 'maps' in google)?true:false 

o

if(google && 'maps' in google){ 
    //true 
} 
else{ 
    //false 
} 

dal ho avuto un problema con il seguente sul mobile:

if (typeof google === 'object' && typeof google.maps === 'object') {...} 

Answer 8

Nessuna delle risposte attuali stanno lavorando con il 100% di coerenza per me (esclusi Google Loader, che mi porto' t provato). Non penso che controllare l'esistenza di google.maps sia sufficiente per essere sicuro che la libreria abbia completato il caricamento. Qui ci sono le richieste di rete che sto vedendo quando l'API di Google Maps e la biblioteca Luoghi opzionale sono richiesti:

quel primo script definisce google.maps, ma il codice che probabilmente avete bisogno (google.maps.Map, google.maps.places) ha vinto' essere intorno fino a quando alcuni degli altri script non sono stati caricati.

È molto più sicuro definire una richiamata durante il caricamento dell'API di Maps. @ La risposta di verti è quasi corretta, ma si basa ancora sul controllo di google.maps in modo non sicuro.

Invece, fare questo:

HTML:

<!-- "async" and "defer" are optional, but help the page load faster. --> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=mapsCallback"> 
</script> 

JS:

var isMapsApiLoaded = false; 
window.mapsCallback = function() { 
    isMapsApiLoaded = true; 
    // initialize map, etc. 
}; 

Answer 9

Se si utilizza jQuery, ho buone notizie per voi:

if (typeof google === 'object' && typeof google.maps === 'object') { 
    gmapInit(); 
} else { 
    $.getScript('https://maps.googleapis.com/maps/api/js?key='+gApiKey+'&language=en', function(){ 
     gmapInit(); 
    }); 
} 

è simile a answer-17702802