Как проверить, загружен ли Google Maps API?

Question

Как проверить, загружен ли Google Maps API (v3)?

Я не хочу выполнять сценарии сопоставления, если API не загружался из-за проблем с подключением к Интернету (веб-страница размещена локально).

Answer 1

if (google.maps) {...} выдаст справочную ошибку, если Google не определен (т. Е. Если API не загрузился).

Вместо этого используйте if (typeof google === 'object' && typeof google.maps === 'object') {...}, чтобы проверить, успешно ли он загрузился.

Answer 2

Ни один из текущих ответов не работает для меня со 100% -ной согласованностью (за исключением Google Loader, который я не пробовал).Я не думаю, что проверки существования google.maps достаточно, чтобы убедиться, что библиотека завершила загрузку.Вот сетевые запросы, которые я вижу, когда запрашиваются API Карт и дополнительная библиотека мест:

Этот самый первый скрипт определяет google.maps,но код, который вам, вероятно, понадобится (google.maps.Map, google.maps.places), будет отсутствовать, пока не загрузятся некоторые другие сценарии.

Намного безопаснее определить обратный вызов при загрузке API Карт.Ответ @ verti почти верен, но все еще полагается на проверку google.maps небезопасно.

Вместо этого сделайте следующее:

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 3

при асинхронной загрузке это работает для меня (спасибо 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 4

Вы можете рассмотреть возможность использования Google Loader

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

Он загрузит указанный вами файл javascript, затем выполнит обратный вызов, указанный в аргументе optionalSettings.

Answer 5

Просто чтобы вы знали, есть проблема с принятым ответом. Он вернет true, если скрипт загрузился, иначе 'typeof google' может вернуть undefined и выдать ошибку . Решение этой проблемы:

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

Это гарантирует, что логическое значение всегда будет возвращено.

Answer 6

РЕДАКТИРОВАТЬ: Если вы не боитесь быть "не явным", то вы можете использовать следующее, в противном случае, если вы не уверены, будет ли только один экземпляр переменной google, используйте ответ DaveS.

Проверьте, загружен ли API google maps v3:

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

в этой условной переменной google будет использовать истину javascript, поэтому, если это будет функция, объект или строка, она станет истинной, а затем попытается получить доступ maps внутри этого объекта.

И обратное:

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

Answer 7

попробовать

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

или

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

, поскольку У меня была проблема со следующим на мобильном телефоне:

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

Answer 8

Простой if(google && google.maps) чек у меня не сработал; Я все еще получаю сообщение об ошибке при попытке получить доступ к API:

TypeError: google.maps.LatLng не является конструктором

В моем случае это, вероятно, связано с тем, что мои обработчики событий мыши сработали еще до того, как API карт даже закончил загрузку. В этом случае, чтобы надежно проверить, загружены ли карты, я создаю псевдоним "gmaps" и инициализирую его на dom ready (используя JQuery):

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

тогда в моих обработчиках событий я могу просто использовать:

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

Answer 9

Если вы используете jQuery, у меня для вас хорошие новости:

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

это похоже на answer-17702802

Answer 10

Я полагаю, что вы можете сделать это с if(google && google.maps){ … }, если вы не имеете в виду то, что находится в этом посте , который касается Maps API V2, но кто-то обновил его для v3 здесь ,