Question

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

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

Answer 1

如果google未定义（例如，如果API未加载），

if (google.maps) {...}会给您一个引用错误。

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

Answer 2

目前的答案都没有为我提供100％的一致性（不包括Google Loader，我还没有尝试过）。我不认为检查google.maps的存在是否足以确保库已完成加载。以下是我在请求Maps API和可选位置库时看到的网络请求：

第一个脚本定义了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.
};

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

Answer 4

您可以考虑使用Google Loader

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

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

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

Answer 6

就这么知道，答案是否有问题。如果脚本已加载，它将返回true，否则“ typeof google”可能返回未定义并抛出错误。解决方案是：

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

这确保始终返回布尔值。

Answer 7

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

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

在我的情况下，这可能是由于我的鼠标事件处理程序在maps API甚至完成下载之前被触发。在这种情况下，为了可靠地检查是否加载了地图，我创建了一个＆＃34; gmaps＆＃34;别名并在dom上初始化它（使用JQuery）：

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

然后在我的事件处理程序中，我可以简单地使用：

if(gmaps) {
    // do stuff with maps
}

Answer 8

<强>尝试

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

或

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

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

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

Answer 9

我相信您可以使用if(google && google.maps){ … }执行此操作，除非您的意思是this post中有关Maps API V2的内容，但有人为v3 here更新了它。

Answer 10

如果您使用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

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

10 个答案: