Javascript Async Google Maps API v3 undefined 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14184956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Async Google Maps API v3 undefined is not a function
提问by Stephen
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.mapsis 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?!
我正在编写一个应用程序，它使用手工构建的框架异步加载 Google 地图。
当我加载地图时，由于某种原因它不会加载所有地图，最终我会得到一个Uncaught TypeError: undefined is not a function. 我检查了 chrome 检查器，发现它google.maps是一个有效的对象，但它没有自己的属性。我在文档加载后手动调用“初始化函数”。我究竟做错了什么？！
回答by Dr.Molle
You can't load the maps-API asynchronous with the well-known URL( http://maps.googleapis.com/maps/api/js?v=3&sensor=false)
您无法使用众所周知的 URL ( http://maps.googleapis.com/maps/api/js?v=3&sensor=false)异步加载地图 API
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.
当您查看脚本文件时，您会看到，这不是加载的 API，而是加载 API 的加载器。加载器使用document.write()，在加载文档后调用时会导致意外结果。
Furthermore the onload-event of the document doesn't wait for asynchronous loaded objects, it may come too quick.
此外，文档的 onload-event 不会等待异步加载的对象，它可能来得太快。
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.
你也不能使用脚本的加载事件来调用初始化函数，因为当它触发时，加载器被加载，而不是地图 API。
What to do:
append a callback-parameter to the script-URL(with the name of the initialize-function as value)
怎么做：
将回调参数附加到脚本 URL（以初始化函数的名称作为值）
http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize
http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize
Now you get a different loader which:
现在你得到一个不同的加载器：
- doesn't use
document.write() - calls the callback-function(initialize) when the maps-API has been loaded
- 不使用
document.write() - 加载地图 API 时调用回调函数（初始化）
Demo: http://jsfiddle.net/doktormolle/7cu2F/
演示：http: //jsfiddle.net/doktormolle/7cu2F/
Related to the comment: seems the callback has to be a function attached to window directly. not cool google :)
与评论相关：似乎回调必须是直接附加到窗口的函数。不酷的谷歌:)
There is another option, the google-API-loaderwhich supports the usage of function-references (instead of function-names).
还有另一种选择，即支持使用函数引用（而不是函数名）的 google-API-loader。
Sample, which loads the maps-API asynchronously, but only when there is an element with the ID map-canvasin the document, and then creates a map:
示例，它异步加载 maps-API，但仅当map-canvas文档中存在具有 ID 的元素时，然后创建地图：
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>