尝试显示谷歌地图时出现“偏移宽度”错误[重复]

Posted 2023-02-23

【中文标题】尝试显示谷歌地图时出现“偏移宽度”错误[重复]

【英文标题】：Getting 'offsetwidth' error when trying to display google maps [duplicate]

【发布时间】：2014-07-28 06:02:40

【问题描述】：

尝试在我的页面上显示 Google 地图时出现此错误。 "javascript 运行时错误：无法获取未定义或空引用的属性 'offsetWidth'"

它来自 var map = new google.maps.Map(document.getElementById("map-canvas") 行的 Javascript 函数 initialize()

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;*/

【问题讨论】：

我的地图显示没有问题。当 div id 与getElementById() 中提供的字符串不同时，通常会出现此错误。你有什么浏览器？

我明白了。我不得不使用 Chrome。它仍然在IE中坏了。有谁知道为什么？

你必须在 Chrome 中做什么？你能提供一个演示这个问题的小提琴吗？

【参考方案1】：

无法重现报告的错误，但是您的代码中的地图（如已发布）没有大小。将此添加到您的 css 中，为 map-canvas div 的父级指定大小：

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

fiddle