尝试显示谷歌地图时出现“offsetwidth”错误[重复]

Question

当我试图在我的页面上显示谷歌地图时，出现了这个错误。“JavaScript运行时错误：无法获取未定义或空引用的属性'offsetWidth'”

它来自于Javascript函数，初始化（）来自var map=newgoogle.maps.Map（document.getElementById（"map-帆布"）

function initialize() {
var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

这是我的html

<div id="map-canvas">
   <h2>hello</h2>
</div>

这是我的CSS

#map-canvas {
position: fixed;
top: 41px;
left: 0;
bottom: 0;
width: 40%;
height: 100%;
background-color: pink;
/*border: 3px solid black;*/
}

Answer 1

无法重现报告的错误，但是代码中的映射（如发布的）没有大小。将此项添加到css中，以为map canvas div的父级提供一个大小：

body, html {
    height:100%;
    width: 100%;
}

小提琴