¿Cómo verificar si Google Maps API está cargado?

Question

¿Cómo comprobar si Google Maps API (v3) está cargado?

No quiero ejecutar scripts de mapeo si la API no se cargó debido a problemas de conectividad a Internet (la página web se aloja localmente).

Answer 1

if (google.maps) {...} le dará un error de referencia si google no está definido (es decir, si la API no se cargó).

En su lugar, use if (typeof google === 'object' && typeof google.maps === 'object') {...} para verificar si se cargó correctamente.

Answer 2

Se podría considerar el uso de la Google Loader

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

Se carga el archivo javascript designado, a continuación, ejecutar la devolución de llamada, especificado en el argumento optionalSettings.

Answer 3

Creo que se puede hacer esto con un if(google && google.maps){ … }, a menos que decir lo que está en this post, que es aproximadamente Maps API V2, pero alguien actualiza para v3 here.

Answer 4

EDIT: Si no tiene miedo de ser "no explícito", puede utilizar following, de lo contrario, si no está seguro de si habrá una sola instancia de google variable, entonces use DaveS answer.

Comprobar si API de Google Maps v3 carga:

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

en esta variable de condición google utilizará Javascript verdad lo que si va a ser la función u objeto o cadena a la que llegará a ser verdad y luego tratará de acceso maps interior de ese objeto.

Y inversa:

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

Answer 5

en la carga asíncrona éste funciona para mí (Gracias 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 simple if(google && google.maps) cheque no funcionó para mí; Todavía consigo un error al intentar acceder a la API:

TypeError: google.maps.LatLng is not a constructor

En mi caso esto es probablemente debido a mis controladores de eventos de ratón se dispare antes de la API de mapas tiene incluso la descarga final.En este caso, para comprobar de forma fiable si se cargan los mapas, se crea un "gmaps" alias y su inicialización El dom lista (usando jQuery):

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

entonces en mis controladores de eventos que simplemente puede utilizar:

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

Answer 7

tratar

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

o

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

desde que tenía un problemacon la siguiente en el móvil:

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

Answer 8

Ninguna de las respuestas actuales están trabajando con 100% de consistencia para mí (excluyendo cargador de Google, que no he T intentó). No creo que verificar la existencia de google.maps sea suficiente para asegurarnos de que la biblioteca haya terminado de cargarse. Aquí están las solicitudes de red que estoy viendo cuando se solicitan la API de Google Maps y la biblioteca Lugares opcional:

Ese primer script define google.maps, pero el código que es probable que tenga (google.maps.Map, google.maps.places) ganó' Estar cerca hasta que se hayan cargado algunos de los otros scripts.

Es mucho más seguro definir una devolución de llamada al cargar la API de Maps. La respuesta de @ verti es casi correcta, pero aún depende de comprobar google.maps de manera insegura.

En su lugar, hacer esto:

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

Si está utilizando jQuery, tengo buenas noticias para ti:

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

es similar a answer-17702802