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

Question

我正在尝试将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>

当我运行这段代码时，浏览器会这样说。

未捕获的TypeError：无法读取null的属性’offsetWidth’

你有什么线索吗？

Answer 1

此问题通常是由于在需要运行JavaScript的javascript运行之前未渲染map div引起的。

您应该将初始化代码放在onload函数中或HTML文件底部的标记之前，以便DOM在执行之前完全呈现（请注意，第二个选项对无效的HTML更为敏感）。

请注意，正[matthewsheets所指出的，这也可能是由div导致的，该div在您的HTML中根本不存在（没有呈现div的病理情况）

<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>