web-dev-qa-db-fra.com

Comment vérifier si l'API Google Maps est chargée?

Comment vérifier si l'API Google Maps (v3) est chargée?

Je ne souhaite pas exécuter de scripts de mappage si l'API ne s'est pas chargée en raison de problèmes de connectivité Internet (la page Web est hébergée localement).

javascriptgoogle-maps-api-3
52
Nirmal

if (google.maps) {...} vous donnera une erreur de référence si Google n'est pas défini (c'est-à-dire si l'API ne s'est pas chargée).

Utilisez plutôt if (typeof google === 'object' && typeof google.maps === 'object') {...} pour vérifier s’il a été chargé avec succès.

104
DaveS

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

 maps api network requests

Ce tout premier script définit google.maps, mais le code dont vous avez probablement besoin (google.maps.Map, google.maps.places) ne sera disponible que lorsque certains des autres scripts auront été chargés.

Il est beaucoup plus sûr de définir un rappel lors du chargement de l’API Maps. La réponse de @ verti est presque correcte, mais elle repose toujours sur la vérification de google.maps avec insécurité.

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.
};
24
Don McCurdy

en async, le chargement 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);
}
14
verti

Vous pouvez 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.

4
Razvan Caliman

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

Vérifiez si l'API de Google Maps v3 est chargé:

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

dans cette condition, la variable google utilisera la vérité javascript. Ainsi, si ce sera une fonction, un objet ou une chaîne, elle deviendra vraie et essaiera ensuite d'accéder à maps à l'intérieur de cet objet.

Et inversement:

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

Un simple contrôle if(google && google.maps) n'a pas fonctionné pour moi; J'ai toujours une erreur quand j'essaie d'accéder à l'API:

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

Dans mon cas, cela est probablement dû au fait que les gestionnaires d’événements de la souris ont été déclenchés avant même le téléchargement de l’API de cartes. Dans ce cas, pour vérifier de manière fiable si les maps sont chargées, je crée un alias "gmaps" et l'initialise sur dom ready (avec JQuery):

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

dans mes gestionnaires d'événements, je peux simplement utiliser:

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

essayez 

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

ou 

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

depuis j'ai eu un problème avec les éléments suivants sur mobile:

if (typeof google === 'object' && typeof google.maps === 'object') {...}
1
Nasser Al-Wohaibi

Je pense que vous pouvez le faire avec une if(google && google.maps){ … }, à moins que vous ne vouliez dire ce que contient cet article , qui concerne Maps API V2, mais quelqu'un l'a mis à jour pour v3 ici . 

0
Bobby Azarbayejani

Si vous utilisez jQuery, j'ai une bonne nouvelle 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 semblable à answer-17702802

0
Tusko Trush