Comment vérifier si L'API GoogleMaps est chargée?

aucune des réponses actuelles ne fonctionne avec une cohérence de 100% pour moi (à l'exclusion de Google Loader, que je n'ai pas essayé). Je ne pense pas que vérifier l'existence de google.maps soit suffisant pour s'assurer que la bibliothèque a terminé le chargement. Voici les requêtes réseau que je vois lorsque L'API Maps et la bibliothèque de lieux optionnels sont demandées:

ce tout premier script définit google.maps , mais le code dont vous avez probablement besoin ( google.maps.Map , google.maps.places ) ne sera pas présent tant que certains des autres scripts ne seront pas chargés.

il est beaucoup plus sûr de définir un callback lors du chargement de L'API Maps. la réponse de @verti est presque correcte, mais s'appuie toujours sur la vérification google.maps de manière peu sûre.

au lieu de cela, faites ceci:

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.
};

en chargement asynchrone celui-ci fonctionne pour moi (Merci à 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);
}

vous pourriez envisager d'utiliser le Google Loader

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

il chargera votre fichier javascript désigné, puis exécutera le rappel, spécifié dans l'argument optionalSettings .

EDIT: Si vous n'avez pas peur d'être "non explicite" alors vous pouvez utiliser la réponse suivante, sinon si vous n'êtes pas sûr qu'il n'y aura qu'une seule instance de la variable google alors utilisez la réponse DaveS.

vérifier si google maps v3 api chargé:

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

dans cette variable de condition google utilisera vérité javascript donc si elle sera fonction ou objet ou chaîne de caractères, il deviendra vrai et ensuite essaiera d'accéder maps à l'intérieur de l'objet en question.

et inverse:

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

un simple if(google && google.maps) check n'a pas fonctionné pour moi; j'obtiens toujours une erreur quand j'essaie d'accéder à L'API:

TypeError: google.cartographie.LatLng n'est pas un constructeur

dans mon cas, cela est probablement dû au fait que les gestionnaires d'événements de ma souris sont déclenchés avant même que l'API maps n'ait fini de télécharger. Dans ce cas, pour vérifier de manière fiable si maps est chargé, je crée un alias" gmaps " et je l'initialise sur dom ready (en utilisant JQuery):

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

puis dans mon event handlers je peux simplement utiliser:

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

essayer

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

ou

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

depuis j'ai eu un problème avec ce qui suit sur mobile:

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

juste pour que vous sachiez, il y a un problème avec la réponse acceptée. Il retournera true si le script a chargé autrement 'typeof google' peut retourner Non défini et jeter une erreur . La solution est la suivante:

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

cela garantit qu'une valeur booléenne est toujours retournée.

je crois que vous pouvez le faire avec un if(google && google.maps){ … } , sauf si vous voulez dire ce qui est dans ce post , qui est à propos des cartes API V2, mais quelqu'un l'a mis à jour pour v3 ici .

Si vous utilisez jQuery , j'ai de bonnes nouvelles pour vous:

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

c'est similaire à réponse-17702802