谷歌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

其他回答

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

2012-11-11 06:19:31

在HTML中设置ng-init=init() 在控制器中使用美元的范围。Init = function(){…} 而不是google。maps。event。addDomListener(window， "load"， init){…}

希望这对你有所帮助。

2016-05-10 10:41:19

我的失败是没有使用

zoomLevel

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

zoom

2018-03-21 03:37:34

改变ID(在所有3个地方)从“map-canvas”到“map”为我修复了它，即使我已经确保ID是相同的，div有宽度和高度，代码直到窗口加载调用后才运行。不是破折号;除了“map”，它似乎不能与任何其他ID一起工作。

2014-05-10 00:29:18

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

例如:

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

2016-11-21 12:47:58

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

推荐文章

最新文章

标签