谷歌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”为空

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

你有什么线索吗?

当前回答

谷歌在样例中使用id="map_canvas"和id="map-canvas"，反复检查id:D

2014-01-21 07:59:40

其他回答

在map API键调用的开始添加async defer。

2018-11-29 21:21:41

我知道我有点晚了，只是想补充一下，当页面中不存在div时，错误也会发生。您还可以在加载谷歌maps函数调用之前检查div是否存在。类似的

function initMap() {
    if($("#venuemap").length != 0) {
        var city= {lat: -26.2041, lng: 28.0473};
        var map = new google.maps.Map(document.getElementById('venuemap'), {
       etc etc
     }
}

2017-01-27 07:11:09

如果你碰巧使用asp.net Webforms，并且正在使用母版页在页面后面的代码中注册脚本，不要忘记使用map元素(vb.net)的clientID:

ClientScript.RegisterStartupScript(Me.[GetType](), "Google Maps Initialization", String.Format("init_map(""" & map_canvas.ClientID() & """...

2015-07-13 07:47:38

这是对之前删除的帖子的编辑，以包含链接的答案的内容，在答案本身。重新发布这个答案的目的是作为React 0.9+用户的一个PSA，他们也遇到了这个问题。

编辑原文

在使用ReactJS时也得到了这个错误，同时遵循这篇博客文章。萨哈特的评论在这里有所帮助请看下面sahat的评论内容。

❗️注意React >= 0.9 在v0.9之前，DOM节点是作为最后一个参数传入的。如果您正在使用它，您仍然可以通过调用this. getdomnode()访问DOM节点。换句话说，在React的最新版本中，用this.getDOMNode()替换rootNode参数。

2017-08-25 01:15:23

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

2013-09-20 00:27:56

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

推荐文章

最新文章

标签