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

Question

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

如果由于互联网连接问题导致API未加载(网页在本地托管),我不想执行映射脚本.

Answer 1

if (google.maps) {...} 如果谷歌未定义(即如果API未加载),将给你一个参考错误.

相反,用于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);
}