Google MAP API未捕获TypeError：无法读取null的属性'offsetWidth'
我正在尝试使用以下代码的Google 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> 当我运行这个代码时，浏览器说这个。
Uncaught TypeError：无法读取null的属性'offsetWidth'
我不知道，因为我遵循本教程给出的方向。
你有什么线索吗？
这个问题通常是由于在需要访问它的javascript运行之前map div没有被渲染。
你应该把你的初始化代码放在一个onload函数中，或者放在HTML文件的底部，就在标记之前，这样DOM就会在执行之前被完全渲染（注意第二个选项对无效HTML更敏感）。
请注意，正如matthewsheets所指出的，这也可能是由于你的HTML中并不存在这个id的div的原因（div的病态情况没有被呈现）
从wf9a5m75的文章中添加代码示例将所有内容放在一个地方：
<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>
对于其他可能仍然存在此问题的人 ，即使尝试了上述build议之后，在初始化函数中为地图canvas使用不正确的select器也会导致同样的问题，因为函数试图访问不存在的内容。 仔细检查你的地图标识是否匹配你的初始化函数，并且你的HTML或者这个相同的错误可能会被抛出。
换句话说，确保你的ID匹配。 ;）
google在样本中使用id="map_canvas"和id="map-canvas" ，仔细检查并重新检查id：D
年，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>
如果您不指定center或zoom地图选项，也可能会出现此错误。
就这样，我添加我的失败情况，让这个工作。 我有一个<div id="map> ，其中我正在加载地图：
var map = new google.maps.Map(document.getElementById("map"), myOptions);
div最初是隐藏的 ，它没有明确的宽度和高度值设置，所以它的大小是width x 0 。 一旦我把这个div的大小设置为这样的CSS
#map { width: 500px; height: 300px; }
一切正常！ 希望这有助于某人。
对于更多的人可能仍然有这个问题，我正在使用一个自我closures的<div id="map1" />标签，第二个div没有显示，似乎并没有在dom中。 只要我将其更改为两个打开和closures标记<div id="map1"></div>它工作。 心连心
我在我的单引号
var map = new google.maps.Map(document.getElementById('map_canvas')
并用双引号replace它们
var map = new google.maps.Map(document.getElementById("map_canvas").
这为我做了诡计。
尽pipe我已经确定ID是相同的，但是将ID（全部3个地方）从“map-canvas”更改为“map”，但是div具有宽度和高度，并且代码不是直到窗口加载调用之后运行。 这不是短跑; 它似乎没有与“地图”以外的任何其他ID一起使用。
还要小心不要写
google.maps.event.addDomListener(window, "load", init())
正确：
google.maps.event.addDomListener(window, "load", init)
另外，确保你没有把哈希符号（＃）放在你的select器中
document.getElementById('#map') // bad document.getElementById('map') // good
声明。 这不是一个jQuery。 只是快速提醒一个人。
我有同样的问题，但问题是缩放没有定义给给谷歌地图的选项对象。
如果您要在循环中创build多个地图，如果单个地图DOM元素不存在，则会将其全部打破。 首先，在创build一个新的Map对象之前检查以确保DOM元素存在。
[...] for( var i = 0; i <= self.multiple_maps; i++ ) { var map_element = document.getElementById( 'map' + '-' + i.toString() ); // Element doesn't exist, don't create map! if( null === map_element ) { continue; } var map = new google.maps.Map( map_element, myOptions); } [...]
如果您碰巧使用了asp.net Webforms，并且正在使用母版页在页面后面的代码中注册脚本，请不要忘记使用map元素（vb.net）的clientID：
ClientScript.RegisterStartupScript(Me.[GetType](), "Google Maps Initialization", String.Format("init_map(""" & map_canvas.ClientID() & """...
为了解决它，你需要添加async defer到脚本。
应该是这样的：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
在这里看到asynchronous延期的含义。
由于您将从主js文件中调用函数，因此您还要确保这是在加载主脚本的位置之后。
- 在你的HTML中设置ng-init = init（）
-
并在控制器中
使用$ scope.init = function（）{…}而不是google.maps.event.addDomListener（window，“load”，init）{…}
希望这会帮助你。
其实最简单的方法来解决这个问题只是移动你的对象之前，它的Javascript代码工作给我。 我猜你的答案对象是在javascript代码之后加载的。
<style type="text/css" > #map_canvas { width:300px; height:300px; } <div id="map_canvas"> </div> // Here <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>
在我的情况下，这些问题解决使用defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script
<script src="<your file>.js" defer></script>
你需要考虑到浏览器对这个选项的支持（虽然我没有看到问题）
确保在首次加载API时包含Places库&libraries=places参数。
例如：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
我知道我晚了一点，只是想补充一点，当div不存在于页面中时也会发生错误。 在加载Google地图函数调用之前，您还可以检查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 } }
检查你是不是覆盖window.self
我的问题：我已经创build了一个组件，写self = this而不是var self = this 。 如果你不使用关键字var ，JS会把这个variables放在窗口对象上，所以我覆盖了导致这个错误的window.self 。
这是一个以前删除的post的编辑，以包含链接答案的内容，在答案本身。 重新发布这个答案的目的是作为一个PSA的React 0.9+用户谁也偶然发现这个问题。
原来编辑的职位
在使用ReactJS的时候也遇到了这个错误。 sahat的评论在这里帮助 – 看到下面的sahat评论的内容。
Re️React> = 0.9
在v0.9之前，DOM节点作为最后一个参数被传入。 如果你正在使用这个，你仍然可以通过调用this.getDOMNode（）来访问DOM节点。
换句话说，使用最新版本的React中的this.getDOMNode（）replacerootNode参数。
这里的问题是没有key参数的API链接：
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&key=YOURKEY"></script>
这种方式工作正常。
