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

Posted 2023-02-23

【中文标题】如何检查是不是已加载 Google Maps API？

【英文标题】：How to check if Google Maps API is loaded?如何检查是否已加载 Google Maps API？

【发布时间】：2012-03-02 23:48:14

【问题描述】：

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

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

【参考方案1】：

您可以考虑使用Google Loader

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

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

【讨论】：

谢谢，但这并不能解决我的问题，因为加载程序脚本本身必须从互联网加载。如果连接失败，google.load 会抛出一个引用错误。不过感谢您的回复。

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

答案可以追溯到 2012 年 2 月。从那时起，加载程序 API 可能发生了变化。

上面的 Google Loader 链接现在完全消失了

【参考方案2】：

我相信您可以使用 if(google && google.maps) … 来执行此操作，除非您指的是 this post 中的内容，这是关于 Maps API V2，但有人将其更新为 v3 here。

【讨论】：

if (google.maps) ... 在未加载 API 时给我一个错误。 DaveS 在他的回答中已经解决了这个问题。谢谢！

【参考方案3】：

if (google.maps) ... 如果 google 未定义（即 API 未加载）会给你一个参考错误。

改为使用if (typeof google === 'object' && typeof google.maps === 'object') ... 来检查它是否加载成功。

【讨论】：

谢谢，这是我一直在寻找的。​​span>

我在命名空间环境中，所以简单地引用google 对我不起作用，我必须使用window.google。

我相信在某些情况下，google.maps 可能会在 Maps API 完全加载完成之前定义，从而导致不一致地中断。如果其他人有同样的问题，可能想在下面尝试我的答案，使用回调。

它给了我错误谷歌未定义。为什么会这样？

Daniela，您用来检查 google 是否已定义的代码是什么？我建议的 typeof 运算符不应给出“google is undefined”错误。

【参考方案4】：

编辑： 如果您不怕“不明确”，则可以使用以下方法，否则如果您不确定是否只有一个 google 变量实例，请使用 DaveS 答案。

检查是否加载了谷歌地图 v3 api：

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

在这个条件变量中google 将使用javascript 真值，因此如果它是函数、对象或字符串，它将变为真，然后将尝试访问该对象内部的maps。

反之：

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

【参考方案5】：

异步加载这个对我有用（感谢 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);

【参考方案6】：

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

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

在我的情况下，这可能是由于我的鼠标事件处理程序在地图 API 完成下载之前被触发。在这种情况下，为了可靠地检查是否加载了地图，我创建了一个“gmaps”别名并在 dom 就绪时对其进行初始化（使用 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】：

对于我来说，当前的答案都没有 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.
;

【讨论】：

如果您不必支持旧版本的 IE (

【参考方案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

【参考方案10】：

您知道，接受的答案存在问题。 如果脚本已加载，它将返回 true，否则 'typeof google' 可能会返回 undefined 并引发错误。解决方法是：

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

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