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).
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.
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:
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.
};
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);
}
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
.
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');
}
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
}
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') {...}
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 .
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