Google MAP API Uncaught TypeError：无法读取null的属性'offsetWidth' [英] Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null

问题描述

 < h2>拓扑< / h2> ; 
 
< script src =https://maps.google.com/maps/api/js?sensor=falsetype =text / javascript>< / script> 
 
< link rel =stylesheettype =text / csshref ={％url css_media'tooltip.topology.css'％}/> 
< link rel =stylesheettype =text / csshref ={％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> 
  

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

未捕获的类型错误：无法读取null的属性'offsetWidth'

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

您是否有任何线索？

解决方案

你应该把你的初始化代码放在一个onload函数中，或者放在你的HTML文件的底部，就在标签之前，所以DOM在执行前完全呈现（请注意，第二个选项对无效的HTML更加敏感）。

注意，正如指出的那样 matthewsheets 这也可能是由于div中的id不存在于你的HTML中（div的病态情况未呈现）

从 wf9a5m75 添加代码示例将所有内容放在一个地方：

 < script type =text / javascript> 
 
函数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> 
  

I'm trying to use Google MAP API v3 with the following code.

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

When I run this code, the browser says this.

Uncaught TypeError: Cannot read property 'offsetWidth' of null

I have no idea, since I follow the direction given in this tutorial.

Do you have any clue?

解决方案

This problem is usually due to the map div not being rendered before the javascript runs that needs to access it.

You should put your initialization code inside an onload function or at the bottom of your HTML file, just before the tag, so the DOM is completely rendered before it executes (note that the second option is more sensitive to invalid HTML).

Note, as pointed out by matthewsheets this also could be cause by the div with that id not existing at all in your HTML (the pathological case of the div not being rendered)

Adding code sample from wf9a5m75's post to put everything in one place:

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

这篇关于Google MAP API Uncaught TypeError：无法读取null的属性'offsetWidth'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！