谷歌地图不会显示在页面中由ajax加载的内容 [英] google map not showing in page by ajax loaded content
问题描述
我有main.html页面，我在main.html中调用子页面，如下所示：
main.html
< html>
< head>
< title>< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-latest.min.js>< / script>
< / head>
< body>
< script type =text / javascript>
函数getmyurl（url）{
$（'＃mypageload'）。load（url）;
}
< / script>
< div id =mypageload> html页面内容会像php include< / div>
< / body>
< / html>
这对于普通页面非常有用。但谷歌地图（googlemap.htm）没有显示地图。我猜这里的问题：
google.maps.event.addDomListener（window，'load'，initialize）;
我可以为修复问题做些什么？
googlemap.htm
< html>
< head>
< title>< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-latest.min.js>< / script>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places>< / script>
< / head>
< body>
< script>
函数initialize（）{
....
}
< / script>
< div id =map-canvas>< / div>
< / body>
< / html>
注意：我的英语不好，我很抱歉错误。
我用你的代码得到的错误（最好我可以复制它）是：
无法在'Document'上执行'write'：除非明确打开，否则无法从异步加载的外部脚本写入文档。
您可以通过异步加载API ：
函数loadScript（src，callback）{
var script = document .createElement（ 脚本）;
script.type =text / javascript;
if（callback）script.onload = callback;
document.getElementsByTagName（head）[0] .appendChild（script）;
script.src = src;
}
loadScript（'http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize'）;
I have main.html page and I am calling sub pages in main.html like this:
main.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script type="text/javascript">
function getmyurl(url){
$('#mypageload').load(url);
}
</script>
<a href="javascript:void(0);" onclick="getmyurl('googlemap.htm');">google map</a>
<div id="mypageload">html page content will come to here like php include</div>
</body>
</html>
This is working good for normal pages. But google map (googlemap.htm) didn't show to map. I guess problem here:
google.maps.event.addDomListener(window, 'load', initialize);
What can I do for fix problem?
googlemap.htm
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
</head>
<body>
<script>
function initialize() {
....
}
</script>
<div id="map-canvas"></div>
</body>
</html>
Note: My English is not good, I am sorry for the miskates.
The error I get with your code (best I can replicate it) is:
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
You can fix that by asynchronously loading the API:
function loadScript(src,callback){
var script = document.createElement("script");
script.type = "text/javascript";
if(callback)script.onload=callback;
document.getElementsByTagName("head")[0].appendChild(script);
script.src = src;
}
loadScript('http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize');
这篇关于谷歌地图不会显示在页面中由ajax加载的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
