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

Ответ 1

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

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

Ответ 2

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

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

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

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

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

Ответ 3

в async-загрузке это работает для меня (благодаря 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);
}

Ответ 4

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

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

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

Ответ 5

EDIT: Если вы не боитесь быть "не явным", вы можете использовать следующее, иначе, если вы не уверены, будет ли только один экземпляр переменной google, то используйте ответ DaveS.

Проверьте, загружены ли Google Maps v3 api:

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

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

И обратное:

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

Ответ 6

Простая проверка 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
}

Ответ 7

попробовать

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

или

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

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

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

Ответ 8

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