题 Google MAP API未捕获TypeError:无法读取null的属性'offsetWidth'


我正在尝试使用以下代码使用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'

我不知道,因为我遵循了给出的方向 本教程

你有什么线索吗?


186
2017-07-31 12:58


起源


您的代码中没有任何内容可供使用 offsetWidth。这真的是完整的代码吗?大概是 {% ... %} 是一些服务器端代码?浏览器中有什么内容 查看来源? - Andrew Leach
我希望gmaps有一个更好的错误消息。 - Keith


答案:


此问题通常是由于在运行需要访问它的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>

303
2017-07-31 15:03



我也在使用require.js,这个问题很少发生,但仍然困扰着我。它与连接速度/延迟有关,因为它只发生在连接受损且限制性代理背后的PC中。我将尝试以最小的方式实例化地图,并在第一个地图空闲事件之后保留所有其他功能。 - amenadiel
当我忘记条件化我的地图脚本时,这种情况一直发生在我身上。添加:var mapExists = document.getElementById(“map-canvas”); if(mapExists){// script}使一切变得更好。 - Imperative
@Imperative我知道我参加聚会很晚了,但是你有一个代码在这个地方工作的例子吗?我正在努力通过ajax加载内容。当正确的内容加载到页面时,映射会触发,但是对于不包含map-canvas元素的其他内容块,它会出错。 - lharby
刚刚放 &callback=your_map_init_function 你要加载的身体中的最后一个元素:...你的html ... <script async src =“gm_url?v = 3&key = xxxx&callback = initialize“> </ script> </ body> - Darío Pm


对于可能仍然存在此问题的其他人即使在尝试上述建议之后,在初始化函数中使用错误的地图画布选择器也会导致同样的问题,因为该函数正在尝试访问不存在的内容。仔细检查您的地图ID是否与您的初始化函数匹配,您的HTML或同样的错误可能会被抛出。

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


105
2017-08-07 18:11



哦,是的!谢谢:) - mika
令人惊讶的是你如何确定这不是问题...直到你仔细检查并意识到你在早期测试中改变它并忘记将其更改回来。 :-) - Charlie Gorichanaz
+1谢谢.. :)) - writeToBhuwan
谢谢。谢谢你的作品;) - Koray Güclü
砸额头 - Zackskeeter


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


25
2018-01-21 07:59



谢谢!我不确定我是怎么错过这个的。 - Mike Sprague


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

23
2017-11-11 06:19



确切地说,首先渲染html div然后JS else添加一个事件监听器。 - foxybagga
如果将回调传递给api脚本调用,是否必须使用addDomListener? - FutuToad


如果未指定,也可能会出现此错误 center 要么 zoom 在您的地图选项中。


20
2017-08-21 14:10



我收到了捏缩放的错误。有任何想法吗 ? - Jalal Mostafa
那就是那一个!自从我以后在脚本中设置它以后从选项中删除了缩放,并且繁荣,地图将在第一次加载,但第二次会产生该错误。谢谢!! - Iain Grant


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

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

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

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

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


9
2017-11-29 12:32



对我来说问题是它只会在IE中抛出widthexception,而不是Chrome或Firefox。 - user1186050
这正是它不适合我的原因。您需要确保CSS与您的地图ID匹配,并且您有某种初始宽度/高度组合,否则不会渲染任何内容。所以回顾一下:1。确保在JavaScript中调用getElementById时,你的html div id与id选择器匹配。确保CSS具有代码来设置特定地图的样式,例如#map1 {width:200px;身高:200px;或类似的,所以它呈现。 - Tahir Khalid


对于可能仍然存在这个问题的更多其他人, 我正在使用自我关闭 <div id="map1" /> 标签,第二个div没有显示,似乎没有在dom中。一旦我将其更改为两个打开和关闭标签 <div id="map1"></div> 有效。心连心


7
2017-09-20 00:27



是的,这为我修好了。在降噪! - seanreads


我的单引号

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

并用双引号替换它们

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

这对我有用。


6
2018-06-19 20:29





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


5
2018-05-10 00:29





还要注意不要写

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

正确:

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

5
2017-09-16 15:19



确实。这也是我的问题。当第二个函数将init函数作为参数传递给事件侦听器时,第一个会立即运行init函数,事件侦听器将在该事件发生时运行init函数。 stackoverflow.com/questions/13286233/... - kivikall


此外,请确保您没有在选择器中放置哈希符号(#)

    document.getElementById('#map') // bad

    document.getElementById('map') // good

声明。这不是一个jQuery。只是快速提醒某人匆忙。


4
2018-03-31 12:26