如何检查Google Maps API是否已加载？

Question

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

如果由于网络连接问题（网页本地托管）API未加载，我不想执行映射脚本。

- Nirmal

Answer 1

if (google.maps) {...} 如果未定义Google（即API未加载），则会导致引用错误。

相反，使用 if (typeof google === 'object' && typeof google.maps === 'object') {...}来检查它是否已成功加载。

- DaveS

---

谢谢，这正是我一直在寻找的。 - Nirmal

我在一个命名空间环境中，因此简单地引用 google 并不能使用，我必须使用 window.google。 - Jon

我相信有些情况下 google.maps 可能在地图 API 完全加载完成之前就被定义了，导致地图无法稳定运行。如果还有人遇到同样的问题，可以尝试我的以下解决方案，使用回调函数。 - Don McCurdy

它给我一个错误，说谷歌未定义。为什么会这样？ - Daniela

Daniela，你用来检查Google是否被定义的代码是什么？我建议使用的typeof运算符不应该出现“google未定义”的错误。 - DaveS

Answer 2

目前所有的答案都不能保证我100%的一致性（不包括我没有尝试过的Google Loader）。 我认为仅检查google.maps是否存在并不足以确保库已经加载完成。 当请求 Maps API 和可选的 Places 库时，我看到的网络请求如下：

第一个脚本定义了google.maps，但是你可能需要的代码（google.maps.Map，google.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

---

现在这个答案比我的好，如果你不必支持旧版本的IE（<9）。 - DaveS

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

- ilker

Answer 4

您可以考虑使用Google Loader来实现这个功能。

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

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

- Razvan Caliman

---

谢谢你，但这并不能解决我的问题，因为加载器脚本本身必须从互联网上加载。如果连接失败，google.load将抛出引用错误。尽管如此，还是感谢你的回复。 - Nirmal

根据该页面，Google地图API不是可用API的一部分。 - Joel Kinzel

答案可以追溯到2012年2月。自那时以来，加载器API可能已经发生了变化。 - Razvan Caliman

上面的 Google Loader 链接现在已经完全消失了。 - user2728841

Answer 5

编辑：

如果您不介意“不明确”，则可以使用以下内容；否则，如果您不确定是否只会有一个google变量的实例，则请使用DaveS的答案。

检查是否加载了Google Maps V3 API：

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

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

反之亦然：

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

- Ivar

Answer 6

请注意，已接受的答案存在一个问题。

如果脚本已加载，则它将返回true，否则'typeof google'可能会返回未定义并抛出错误。解决方法如下：

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

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

- Ric Flair

Answer 7

尝试。

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

or

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

自从我在移动设备上遇到以下问题：

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

- Nasser Al-Wohaibi

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
}

- Nathan

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

- Tusko Trush

Answer 10

我相信你可以使用if(google && google.maps){ … }来实现这个功能，除非你说的是这篇帖子里面提到的Maps API V2，不过有人在这里更新了它的V3版本。

- Bobby Azarbayejani

---

当API未加载时，if (google.maps) {...}会抛出错误。DaveS在他的答案中解决了这个问题。谢谢！ - Nirmal