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

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

你有什么线索吗?

当前回答

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

2018-11-29 21:21:41

其他回答

这样我就把失败的情况加进去了。我有一个<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

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

2018-11-29 21:21:41

这里的问题是API链接没有关键参数:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&key=YOURKEY"></script>

这种方法很好。

2016-09-23 00:19:47

我在我的

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

然后用双引号代替

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

这招对我很管用。

2014-06-19 20:29:01

如果你没有在地图选项中指定居中或缩放，你也会得到这个错误。

2015-08-21 14:10:52

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

推荐文章

最新文章

标签