Google Maps API - 地图不加载 [英] Google Maps API - Map Is Not Loaded
问题描述
我一直在尝试在我的网站中嵌入谷歌地图，但收效甚微。
我已经使用了下一个代码部分:(我在我自己的计算机上使用了一个实际的api密钥）
pre $ code >< script type =text / javascript
src =https://maps.googleapis.com/maps/api/js?key=myapikey&sensor=true>
< / script>
< script type =text / javascript>
函数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-canvasstyle =width：40％; height：40％>< / div>
我该如何处理这个问题？
提前致谢 将画布宽度和高度指定为绝对长度，而不是 ％。
例如：
< div id =map-canvasstyle =width：300px; height：400px>< / div>
或者，对于画布坚持使用％但将其放入宽度和高度均为绝对长度的容器中。
< div style =width：1000px; height ：800像素;>
< / div>
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)
<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>
How could I handle this problem ? Thanks in advance
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>
这篇关于Google Maps API - 地图不加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
