Google Maps API - 未加载地图

时间:2013-03-29 09:25:43

标签: javascript html5 google-maps google-maps-api-3

我一直在尝试在我的网站上嵌入谷歌地图,但收效甚微。 我已经使用了下一个代码部分:(我在自己的计算机上使用了一个实际的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>

我怎么能处理这个问题? 提前致谢

2 个答案:

答案 0 :(得分:15)

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

例如:

<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>

答案 1 :(得分:0)

如果您不想在px中将大小修改为绝对宽度和高度,请确保所有父标记的高度均为100%

例如html - &gt;身体 - &gt; some_ids - &gt;地图-ID

所有这些都有%和

的高度和宽度

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