谷歌地图 api 无法加载？答案

【问题标题】：Google maps api fails to load?谷歌地图 api 无法加载？
【发布时间】：2014-02-24 23:13:59
【问题描述】：

我正在尝试使用 google maps api 在我的网页中包含一个 google map。

在我的 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 中。我尝试在自己的计算机上编写该页面，然后使用浏览器访问它，但没有运行任何网络服务器，这很好 - 地图按应有的方式显示。

我尝试了“检查元素”，但我得到的错误是

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

对应这段代码sn-p:

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

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

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

【问题讨论】：

标签： api load maps onload

【解决方案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

【讨论】：