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之前未映射map 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

谷歌使用id="map_canvas"和id="map-canvas"在样本中,仔细检查并重新检查id:D

Answer 4

如果未指定center或zoom在地图选项中,也可能会出现此错误.

Answer 5

一年,geocodezip的答案是正确的.所以改变你的代码:(如果你仍然遇到麻烦,或者将来可能还有其他人)

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

就这样,我添加了失败的场景,让它发挥作用.我有一个<div id="map>我正在加载地图:

var map = new google.maps.Map(document.getElementById("map"), myOptions);

并且div最初是隐藏的,它没有明确设置宽度和高度值,所以它的大小是width x 0.一旦我像这样在CSS中设置这个div的大小

#map {
    width: 500px;
    height: 300px;
}

一切正常!希望这有助于某人.

Answer 7

对于可能仍然存在这个问题的更多其他人,我使用的是自动关闭<div id="map1" />标签,而第二个div没有显示,并且似乎没有出现在dom中.一旦我将它改为两个打开和关闭标签<div id="map1"></div>就可以了.心连心

Answer 8

我的单引号

var map = new google.maps.Map( document.getElementById('map_canvas') );

并用双引号替换它们

var map = new google.maps.Map( document.getElementById("map_canvas") );

这对我有用.

Answer 9

还要注意不要写

google.maps.event.addDomListener(window, "load", init())

正确:

google.maps.event.addDomListener(window, "load", init)

Answer 10

将ID(在所有3个地方)从"map-canvas"更改为"map"为我修复了它,即使我确定ID相同,div也有宽度和高度,代码不是运行到窗口加载调用之后.这不是破折号; 它似乎不适用于任何其他ID而不是"地图".