Google Maps API - 地图未加载答案

【问题标题】：Google Maps API - Map Is Not LoadedGoogle Maps API - 地图未加载
【发布时间】：2013-03-19 23:53:33
【问题描述】：

我一直在尝试在我的网站中嵌入谷歌地图，但收效甚微。我已经使用了下一个代码部分：（我在我自己的计算机上使用了一个实际的 api 密钥）

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=myapikey&sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

在<body> 部分我添加了<div id="map-canvas" style="width: 40%; height: 40%"></div>

我该如何处理这个问题？提前致谢

【问题讨论】：

好像是 api 密钥有问题，尝试从 URL 中删除它
正如我在帖子中提到的 - 我有一个 api 密钥，只是将它替换为帖子的“myapikey”
使用 chrome 开发工具查看 maps js 文件是否加载，如果是则使用调试工具并在 map var 中设置断点并确保对象已创建。

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

【解决方案1】：

将画布的宽度和高度指定为绝对长度，而不是%。

例如：

<div id="map-canvas" style="width: 300px; height: 400px"></div>

或者，坚持使用 % 作为画布，但将其放在宽度和高度指定为绝对长度的容器中。

<div style="width:1000px; height:800px;">
    <div id="map-canvas" style="width: 40%; height: 40%"></div>
</div>

【讨论】：

我们赢了 :) 谢谢！

【解决方案2】：

如果您不想将大小固定为以 px 为单位的绝对宽度和高度，请确保所有父标签的高度为 100%

例如 html -> body -> some_ids -> map-id

它们的高度和宽度都以 % 为单位

参考：https://developers.google.com/maps/documentation/javascript/tutorial

【讨论】：