Html Google Maps API - 地图未加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15700550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps API - Map Is Not Loaded
提问by Beetroot-Beetroot
I've been trying to embed a google map in my site , but with not much success. I've used the next code section: (i'm using an actual api key on my own computer)
我一直在尝试在我的网站中嵌入谷歌地图，但没有取得多大成功。我使用了下一个代码部分：（我在自己的计算机上使用了实际的 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>
inside <body>section i've added <div id="map-canvas" style="width: 40%; height: 40%"></div>
<body>我添加的内部部分<div id="map-canvas" style="width: 40%; height: 40%"></div>
How could I handle this problem ? Thanks in advance
我怎么能处理这个问题？提前致谢
回答by Beetroot-Beetroot
Specify the canvas' width and height as absolute lengths rather than %.
将画布的宽度和高度指定为绝对长度而不是%。
For example :
例如 ：
<div id="map-canvas" style="width: 300px; height: 400px"></div>
Alternatively, stick with %for the canvas but put it inside a container with width and height specified as absolute lengths.
或者，坚持使用%画布，但将其放在宽度和高度指定为绝对长度的容器中。
<div style="width:1000px; height:800px;">
<div id="map-canvas" style="width: 40%; height: 40%"></div>
</div>
回答by Vishal Rewari
In case you don`t want to fix your size to absolute width and height in px, ensure that all parent tags have height 100%
如果您不想将尺寸固定为以 px 为单位的绝对宽度和高度，请确保所有父标签的高度均为 100%
for example html -> body -> some_ids -> map-id
例如 html -> body -> some_ids -> map-id
All of them have height and width in %
它们的高度和宽度都以 % 为单位
ref: https://developers.google.com/maps/documentation/javascript/tutorial
参考：https: //developers.google.com/maps/documentation/javascript/tutorial
