logo标签列表

谷歌地图API - 地图未加载

javascripthtmlgoogle-mapsgoogle-maps-api-3
10

我一直在尝试在我的网站上嵌入谷歌地图，但是并没有取得太多成功。我已经使用了以下代码段：（我正在自己的计算机上使用真实的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中删除它。 - Risto Novik
正如我在帖子中提到的那样 - 我有一个API密钥，只是为了帖子将其替换为“myapikey”。 - user975343
使用Chrome开发者工具查看地图JS文件是否已加载，如果是，则使用调试工具，在地图变量中设置断点，并确保对象已创建。 - Risto Novik
2个回答
20

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

例如：

<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>
我们有一个赢家 :) 谢谢！ - user975343
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接