Async Google Maps API v3 undefined 不是函数 [英] Async Google Maps API v3 undefined is not a function

问题描述

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

I'm writing an app that loads Google Maps asynchronously with a hand-built framework.
When I load maps it will not load all of it for some reason and I'll end up with a Uncaught TypeError: undefined is not a function. I checked chrome inspector and found out that google.maps is a valid object, but it has none of its own properties. I manually call the "initialize function" well after the document has loaded. What am I doing wrong?!

推荐答案

你不能用众所周知的 URL( http://maps.googleapis.com/maps/api/js?v=3&sensor=false )

You can't load the maps-API asynchronous with the well-known URL( http://maps.googleapis.com/maps/api/js?v=3&sensor=false )

当您查看脚本文件时，您会发现，这不是加载的 API，而是加载 API 的加载器.加载器使用了 document.write() ，在文档加载后调用时会导致意外结果.

When you take a look at the script-file, you'll see, that this is not the API that gets loaded, it's a loader that loads the API. The loader makes use of document.write() , what will lead you to unexpected results when called after the document has been loaded.

而且文档的 onload-event 不会等待异步加载的对象，它可能来得太快了.

Furthermore the onload-event of the document doesn't wait for asynchronous loaded objects, it may come too quick.

你也不能使用脚本的加载事件来调用初始化函数，因为当它触发时，加载器被加载，而不是地图 API.

You also cannot use the load-event of the script to invoke the initialize-function, because when it fires, the loader is loaded, not the maps-API.

该怎么做:
将回调参数附加到脚本 URL(以初始化函数的名称作为值)

What to do:
append a callback-parameter to the script-URL(with the name of the initialize-function as value)

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

现在你得到一个不同的加载器:

Now you get a different loader which:

1. 不使用document.write()
2. 在加载地图 API 时调用回调函数(初始化)

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

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

还有另一种选择，google-API-loader，它支持使用函数引用(而不是函数-名字).

There is another option, the google-API-loader which supports the usage of function-references (instead of function-names).

Sample，异步加载maps-API，但仅当文档中存在ID为map-canvas的元素时，然后创建地图:

Sample, which loads the maps-API asynchronously, but only when there is an element with the ID map-canvas in the document, and then creates a 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>

这篇关于Async Google Maps API v3 undefined 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！