javascript-如何检查是否加载了Google Maps API?

如何检查Google Maps API(v3)是否已加载?

如果由于Internet连接问题(网页托管在本地)而未加载API,我不想执行映射脚本。

Nirmal asked 2019-11-08T16:56:25Z
10个解决方案
111 votes

如果未定义google(即未加载API),则if (typeof google === 'object' && typeof google.maps === 'object') {...}将为您提供参考错误。

而是使用if (typeof google === 'object' && typeof google.maps === 'object') {...}检查是否成功加载。

DaveS answered 2019-11-08T16:56:46Z
26 votes

当前的答案对我来说都没有100%的一致性(不包括Google Loader,我没有尝试过)。 我认为检查google.maps的存在不足以确保库已完成加载。 当请求Maps API和可选的Places库时,这是我看到的网络请求:

maps api network requests

最初的脚本定义了google.maps,但是您可能需要的代码(google.maps.Mapgoogle.maps.places)会在其他一些脚本加载完毕后出现。

加载Maps 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.
};
Don McCurdy answered 2019-11-08T16:57:39Z
14 votes

在异步加载中,这对我有用(感谢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);
}
ilker answered 2019-11-08T16:58:05Z
4 votes

您可以考虑使用Google Loader

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

它将加载您指定的javascript文件,然后执行在optionalSettings参数中指定的回调。

Razvan Caliman answered 2019-11-08T16:58:46Z
2 votes

编辑:如果您不怕“不明确”,则可以使用以下命令;否则,如果不确定是否只有google变量的一个实例,请使用DaveS答案。

检查是否加载了Google Maps v3 api:

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

在这种情况下,变量google将使用javascript true,因此如果它是函数,对象或字符串,它将变为true,然后尝试访问该对象内部的maps

反之:

if(!google || !google.maps){
    console.log('Not loaded yet');
}
Aivaras answered 2019-11-08T16:59:39Z
2 votes

众所周知,答案存在问题。如果脚本已加载,它将返回true,否则'typeof google'可能返回undefined并抛出错误。 解决方案是:

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

这样可以确保始终返回布尔值。

Ric Flair answered 2019-11-08T17:00:21Z
1 votes

一张简单的if(google && google.maps)支票对我不起作用; 尝试访问API时仍然出现错误:

TypeError:google.maps.LatLng不是构造函数

就我而言,这可能是由于我的鼠标事件处理程序在maps API尚未完成下载之前就被触发了。 在这种情况下,为了可靠地检查是否已加载地图,我创建了一个“ gmaps”别名,并在dom就绪时对其进行了初始化(使用JQuery):

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

然后在事件处理程序中,我可以简单地使用:

if(gmaps) {
    // do stuff with maps
}
Nathan answered 2019-11-08T17:01:09Z
1 votes

尝试

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

要么

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

因为我在移动设备上遇到以下问题:

if (typeof google === 'object' && typeof google.maps === 'object') {...}
Nasser Al-Wohaibi answered 2019-11-08T17:01:39Z
0 votes

我相信您可以使用if(google && google.maps){ … }来做到这一点,除非您的意思是这篇文章中的内容,这是关于Maps API V2的,但是有人在这里针对v3更新了它。

Bobby Azarbayejani answered 2019-11-08T17:02:07Z
0 votes

如果您使用的是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();
     });
 }

它类似于答案-17702802

Tusko Trush answered 2019-11-08T17:02:41Z
translate from https://stackoverflow.com:/questions/9228958/how-to-check-if-google-maps-api-is-loaded