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

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

你有什么线索吗?


当前回答

还要注意不要写信

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

正确的:

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

其他回答

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

同样,确保你没有在选择器中放置散列符号(#)

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

    document.getElementById('map') // good

声明。它不是jQuery。给赶时间的人一点提醒。

我的失败是没有使用

zoomLevel

作为一种选择,而不是正确的选择

zoom

确保在第一次加载API时包含了Places库&libraries= Places参数。

例如:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

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

编辑原文


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

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