Question

Google MAP API 未捕获 TypeError：无法读取 null 的属性“offsetWidth”

2012-07-31

332258

javascript google-maps-api-3

我正在尝试使用以下代码来使用 Google MAP API v3。

<h2>Topology</h2>

<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.topology.css' %}" />
<link rel="stylesheet" type="text/css" href="{% url css_media 'tooltip.css' %}" />

<style type="text/css" >
      #map_canvas {
              width:300px;
            height:300px;
     }
</style>

<script type="text/javascript">

var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

</script>

<div id="map_canvas"> </div>

当我运行此代码时，浏览器会显示以下内容。

Uncaught TypeError: Cannot read property 'offsetWidth' of null

我不知道，因为我遵循本教程中给出的说明。

您有什么线索吗？

Answer 1

此问题通常是由于在需要访问地图 div 的 javascript 运行之前未呈现地图 div 造成的。

您应该将初始化代码放在 onload 函数内或 HTML 文件的底部，就在标记之前，这样 DOM 才能在执行之前完全呈现（请注意，第二种选择对无效 HTML 更敏感）。

请注意，正如 matthewsheets 所指出的那样，这也可能是由于您的 HTML 中根本不存在该 id 的 div（div 未被呈现的病态情况）

添加来自 wf9a5m75 帖子的代码示例，将所有内容放在一个地方：

<script type="text/javascript">

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);

</script>

Answer 2

对于可能仍遇到此问题的其他用户 ，即使尝试了上述建议，在初始化函数中使用错误的地图画布选择器也会导致同样的问题，因为该函数试图访问不存在的内容。仔细检查您的地图 ID 是否与您的初始化函数和 HTML 匹配，否则可能会引发同样的错误。

换句话说，确保您的 ID 匹配。;)

Answer 3

如果您未在地图选项中指定 center 或 zoom ，也会出现此错误。

JamesFrost

2015-08-21