Async Google Maps API v3 undefined不是一个功能

Question

我正在编写一个应用程序,可以使用手工构建的框架异步加载Google地图.
当我加载地图时,由于某种原因它不会加载所有这些,我最终会得到一个Uncaught TypeError: undefined is not a function.我检查了chrome检查器,发现它google.maps是一个有效的对象,但它没有自己的属性.在文档加载后我手动调用"初始化函数".我究竟做错了什么？!

Answer 1

您无法使用众所周知的URL异步加载maps-API(http://maps.googleapis.com/maps/api/js?v=3&sensor=false)

当你看一下脚本文件时,你会发现,这不是加载的API,它是一个加载API的加载器.加载器使用document.write(),在加载文档后调用时会导致意外结果.

此外,文档的onload-event不等待异步加载的对象,它可能来得太快.

您也无法使用脚本的load-event来调用initialize-function,因为当它触发时,加载加载器,而不是maps-API.

怎么做:
将一个callback-parameter附加到script-URL(初始化函数的名称作为值)

http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize

现在你得到一个不同的装载机:

1. 不使用 document.write()
2. 加载maps-API时调用callback-function(initialize)

演示:http://jsfiddle.net/doktormolle/7cu2F/

与评论相关:似乎回调必须是直接附加到窗口的函数.不酷google :)

还有另一个选项,google-API-loader,它支持使用函数引用(而不是函数名).

Sample,异步加载maps-API,但仅当map-canvas文档中有ID的元素,然后创建一个map:

    window.addEventListener('load',function(){
      if(document.getElementById('map-canvas')){
        google.load("maps", "3",{
          callback:function(){
             new google.maps.Map(document.getElementById('map-canvas'), {
                center: new google.maps.LatLng(0,0),
                zoom: 3
              });
          }
        });     
      }
    },false);

      body,html,#map-canvas{
        height:100%;
        margin:0;
        padding:0;
        width:100%;
      }

<script src="https://www.google.com/jsapi?.js"></script>
<div id="map-canvas"></div>