Question

我有main.html页面，我在main.html中调用子页面，如下所示：

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>

这对普通页面有效。但谷歌地图（googlemap.htm）没有显示到地图。我猜这里有问题：

google.maps.event.addDomListener(window, 'load', initialize);

我可以为修复问题做些什么？

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>

注意：我的英语不好，我很抱歉这些错误。

Answer 1

我的代码错误（最好我可以复制它）是：

无法在'Document'上执行'write'：除非明确打开，否则无法从异步加载的外部脚本写入文档。

您可以按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');

proof of concept fiddle

Answer 2

由于Google地图支持 async 加载，您可以通过应用以下更改来实现：

在googlemap.htm文件中替换以下行：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

带

<script src="https://maps.googleapis.com/maps/api/js?callback=initialize&sensor=false&libraries=places" async defer></script>

由于callback参数指定加载Google地图库后调用的函数名称，请在googlemap.htm文件中注释（或删除）：

//google.maps.event.addDomListener(window, 'load', initialize);

谷歌地图没有在页面中显示由ajax加载的内容

2 个答案: