Question

我正在尝试使用google maps api在我的网页中添加谷歌地图。

在我的html中，我的标题是：

<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">    </script>
</head>

请注意，我使用的是“https”，否则会出现安全错误...

我的身体标签是：

<body window.onload="initialize()">

我有一个包含地图的div：

<div id="map_canvas"></div>

在外部javascript文件中我有一个函数initialize（），它应该将地图加载到map_canvas div中。我尝试在自己的计算机上编写页面，并使用我的浏览器访问它，没有运行Web服务器，这很好 - 地图显示应该有。

我尝试了'检查元素'，我得到的错误是

Uncaught TypeError: Object #<Document> has no method 'write' js?sensor=false:8

对应于此代码段：

function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
               ' type="text/javascript"><' + '/script>');
}

我出错的任何想法？我唯一能想到的是地图无法在页面的其余部分之前加载，但如果是这样，我不知道如何解决这个问题....任何帮助都非常感谢！我一直在谷歌搜索几个小时没有运气..

我认为这个问题可能与我用XHTML编写但api使用'document.write'这一事实有关，这是非法的 - 有没有办法解决这个问题？

Answer 1

最后在这里找到了解决方案：

我必须在初始化函数后添加一个loadScript函数，例如：

function initialize() {
 var mapOptions = {
 zoom: 8,
 center: new google.maps.LatLng(-34.397, 150.644)
};

var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

function loadScript() {
 var script = document.createElement('script');
 script.type = 'text/javascript';
 script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
  'callback=initialize';
 document.body.appendChild(script);
}

window.onload = loadScript;

我在这里找到了解决方案：

https://developers.google.com/maps/documentation/javascript/tutorial#asynch

谷歌地图api无法加载？

1 个答案: