谷歌MAP API未捕获的类型错误:无法读取属性“offsetWidth”为空

我试图使用下面的代码使用谷歌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>

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

无法读取属性“offsetWidth”为空

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

你有什么线索吗?

当前回答

这样我就把失败的情况加进去了。我有一个<div id="map>，其中我正在加载地图:

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

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

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

一切工作!希望这能帮助到一些人。

2013-11-29 12:32:30

其他回答

对于更多可能仍然有这个问题的人，我使用了一个自关闭的<div id="map1" />标签，第二个div没有显示，似乎不在dom中。只要我把它改成两个打开和关闭标签<div id="map1"></div>它就工作了。hth

2013-09-20 00:27:56

还要注意不要写信

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

正确的:

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

2014-09-16 15:19:58

对于其他可能仍然存在这个问题的人来说，即使在尝试了上述建议之后，在初始化函数中对地图画布使用错误的选择器也会导致同样的问题，因为该函数试图访问不存在的东西。仔细检查你的map Id是否匹配你的初始化函数和HTML，否则同样的错误可能会被抛出。

换句话说，确保您的id匹配。；）

2013-08-07 18:11:17

检查你没有重写window.self

我的问题:我创建了一个组件，并写了self = this而不是var self = this。如果你不使用关键字var, JS会把这个变量放在window对象上，所以我覆盖了window。导致此错误的Self。

2017-05-02 21:10:19

为了解决这个问题，你需要在脚本中添加async defer。

应该是这样的:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

在这里可以看到async defer的含义。

因为你将从主js文件中调用一个函数，你还想确保它在你加载主脚本的那个文件之后。

2016-03-26 14:36:48

谷歌MAP API未捕获的类型错误:无法读取属性“offsetWidth”为空

推荐文章

最新文章

标签