谷歌地图 - 地图未加载答案

【问题标题】：Google Maps - Map Not Loaded谷歌地图 - 地图未加载
【发布时间】：2015-04-22 01:32:26
【问题描述】：

我正在尝试使用以下代码创建地图并加载 .kmz 文件：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8">
<style type ="text/css"> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px}</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=mykey"></script>
<script type="text/javascript">
  function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(58.33, -98.52),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var kmzLayer = new google.maps.KmlLayer('link_to_kmz_file');
    kmzLayer.setMap(map);
  }
</script>

</head
<body>
<div id="map_canvas"> </div>
</body
</html>

当没有加载任何内容并且我不知道它为什么会发生时，就会出现问题。我应该提到我的API_KEY 是有效的，因为我用它来创建另一个不需要加载 .kmz 文件的地图，而且我也不将 .kmz 文件存储在本地主机上，而是在我自己的服务器上。

如果有人能指出解决方案，我将不胜感激。

提前致谢。

【问题讨论】：

您能否在浏览器调试工具中看到对 KML 的成功请求\响应？
你在哪里打电话给initialize()？
status of the KmlLayer 是什么？请提供一个 Minimal, Complete, Tested and Readable example 来证明该问题。

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

在您的 HTML 中，您正在使用：

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

在你的 CSS 中：

#map-canvas {
    ...
}

问题：map-canvas≠map_canvas

由于地图需要显示高度，因此在您更正 CSS 之前，您的地图不会显示，如下所示：

#map_canvas {
    ...
}

+你需要更正你的结束</head>和</body>标签。

+你需要调用initialize()函数。

将此添加到您的 javascript：

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

【讨论】：

【解决方案2】：

你没有在任何地方调用initialize()，只是声明它。如果您想在加载正文时调用它，请将其添加到正文 onload。

<body onload="initialize()">

您的结束正文标签也不完整

</body>

和你的结束头标签

</head>

【讨论】：

感谢您的回答，但地图没有再次加载。

【解决方案3】：

像这样在你的函数之后添加

`<script type="text/javascript">
  function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(58.33, -98.52),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var kmzLayer = new google.maps.KmlLayer('link_to_kmz_file');
    kmzLayer.setMap(map);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>`

【讨论】：

【解决方案4】：

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

【讨论】：

这看起来可能是解决方案 - 如果它向原始发帖人解释为什么它会起作用，或者他们应该在哪里添加它，我会是一个更好的答案。
感谢您的回答，但地图没有再次加载。