异步谷歌地图API V3不确定是不是一个函数 [英] Async Google Maps API v3 undefined is not a function
问题描述
我正在写一个手工打造的框架异步加载谷歌地图的应用程序。结果
当我打开地图就不会加载所有的它由于某种原因,我会用未捕获类型错误结束:未定义不是一个函数
。我检查铬检查,并发现了 google.maps
是一个有效的对象,但它有没有自己的属性。我手动调用初始化函数的文件加载后良好。我在做什么错?!
您不能与知名网址加载地图的API异步(<一个href=\"http://maps.googleapis.com/maps/api/js?v=3&sensor=false\">http://maps.googleapis.com/maps/api/js?v=3&sensor=false )
当你看看这个脚本文件,你会看到,这是不是被加载的API,它是装载API加载器。装载机利用的document.write()
,该文档已被加载后调用的时候是什么会导致你意想不到的效果。
此外,该文件不等待异步加载的对象的onload事件,它可能会太快。
您也不能使用脚本的负载事件调用初始化函数,因为火灾时,加载器加载,而不是地图的API。
做什么:结果
追加回调参数到脚本的URL(用初始化函数作为值的名称)
http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize$c$c>
现在你会得到一个不同的装载机其中:
- 不使用
的document.write()
- 当调用地图的API已经被加载的回调函数(初始化)
演示:<一href=\"http://jsfiddle.net/doktormolle/7cu2F/\">http://jsfiddle.net/doktormolle/7cu2F/
相关注释:似乎回调有直接连接到窗口的功能。不冷静谷歌:)的
有另一种选择,支持的函数引用(而不是功能 - 使用谷歌的-API装载机名称)。
样品,其中异步加载地图的API,但只有当有一个与文件中的ID 地图画布
元素,然后创建一个映射:
window.addEventListener('负荷',函数(){\r
如果(的document.getElementById('地图画布')){\r
的google.load(地图,3,{\r
回调:函数(){\r
新google.maps.Map(的document.getElementById('地图画布'){\r
中心:新google.maps.LatLng(0,0),\r
变焦:3\r
});\r
}\r
});\r
}\r
},FALSE);
\r
体,HTML,#地图帆布{\r
高度:100%;\r
保证金:0;\r
填充:0;\r
宽度:100%;\r
}
\r
&LT;脚本SRC =https://www.google.com/jsapi ?.js文件&GT;&LT; / SCRIPT&GT;\r
&LT; DIV ID =地图画布&GT;&LT; / DIV&GT;
\r
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?!
You can't load the maps-API asynchronous with the well-known URL( http://maps.googleapis.com/maps/api/js?v=3&sensor=false )
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.
Furthermore the onload-event of the document doesn't wait for asynchronous loaded objects, it may come too quick.
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.
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:
- doesn't use
document.write()
- calls the callback-function(initialize) when the maps-API has been loaded
Demo: 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-loader which supports the usage of function-references (instead of function-names).
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>
这篇关于异步谷歌地图API V3不确定是不是一个函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!