Как проверить, загружен ли API Карт Google (v3)?
Я не хочу выполнять скрипты сопоставления, если API не загружался из-за проблем с подключением к Интернету (веб-страница размещается локально).
Как проверить, загружен ли API Карт Google (v3)?
Я не хочу выполнять скрипты сопоставления, если API не загружался из-за проблем с подключением к Интернету (веб-страница размещается локально).
if (google.maps) {...}
даст вам ссылочную ошибку, если google - undefined (т.е. если API не загрузился).
Вместо этого используйте if (typeof google === 'object' && typeof google.maps === 'object') {...}
, чтобы проверить, успешно ли он загружен.
Ни один из текущих ответов не работает со 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.
};
в 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);
}
Вы можете использовать Google Loader
google.load("maps", "3", {callback: myFn});
Он загрузит ваш указанный файл javascript, а затем выполнит обратный вызов, указанный в аргументе optionalSettings
.
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');
}
Простая проверка 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
}
попробовать
(google && 'maps' in google)?true:false
или
if(google && 'maps' in google){
//true
}
else{
//false
}
, поскольку у меня была проблема со следующим:
if (typeof google === 'object' && typeof google.maps === 'object') {...}
Я считаю, что вы можете сделать это с помощью if(google && google.maps){ … }
, если вы не имеете в виду то, что находится в этом сообщении, что касается Maps API V2, но кто-то обновил его для v3 здесь.