Javascript Google MAP API 未捕获类型错误：无法读取 null 的属性“offsetWidth”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11740663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null
提问by jaeyong
I'm trying to use Google MAP API v3 with the following code.
我正在尝试通过以下代码使用 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>
When I run this code, the browser says this.
当我运行这段代码时，浏览器会说这个。
Uncaught TypeError: Cannot read property 'offsetWidth' of null
未捕获的类型错误：无法读取 null 的属性“offsetWidth”
I have no idea, since I follow the direction given in this tutorial.
我不知道，因为我遵循本教程中给出的方向。
Do you have any clue?
你有什么线索吗？
回答by geocodezip
This problem is usually due to the map div not being rendered before the javascript runs that needs to access it.
此问题通常是由于在需要访问它的 javascript 运行之前未呈现地图 div。
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).
您应该将初始化代码放在 onload 函数内或 HTML 文件底部，就在标记之前，以便 DOM 在执行之前完全呈现（请注意，第二个选项对无效 HTML 更敏感）。
Note, as pointed out by matthewsheetsthis 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)
请注意，正如matthewsheets所指出的，这也可能是由于 div 的 id 根本不存在于您的 HTML 中（未呈现 div 的病理情况）
Adding code sample from wf9a5m75's post to put everything in one place:
从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>
回答by matthewsheets
For others that might still be having this issue, even after trying the above recommendations, using an incorrect selector for your map canvas in the initialize function can cause this same issue as the function is trying to access something that doesn't exist. Double-check that your map Id matches in your initialize function and your HTML or this same error may be thrown.
对于可能仍然存在此问题的其他人，即使在尝试了上述建议之后，在 initialize 函数中为地图画布使用不正确的选择器也会导致与该函数尝试访问不存在的内容相同的问题。仔细检查您的地图 ID 是否与您的初始化函数和您的 HTML 匹配，否则可能会抛出相同的错误。
In other words, make sure your IDs match up. ;)
换句话说，请确保您的 ID 匹配。;)
回答by JamesFrost
You can also get this error if you don't specify centeror zoomin your map options.
如果您未在地图选项中指定center或zoom，您也可能会收到此错误。
回答by dpineda
google uses id="map_canvas"and id="map-canvas"in the samples, double-check and re-double-check the id :D
谷歌使用id="map_canvas"并id="map-canvas"在示例中，仔细检查并重新检查 id :D
回答by wf9a5m75
Year, geocodezip's answer is correct. So change your code like this: (if you still in trouble, or maybe somebody else in the future)
年，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>
回答by Nikola
Just so I add my fail scenario in getting this to work. I had a <div id="map>in which I was loading the map with:
所以我添加了我的失败场景来让它工作。我<div id="map>在其中加载地图：
var map = new google.maps.Map(document.getElementById("map"), myOptions);
and the div was initially hiddenand it didn't have explicitly width and height values set so it's size was width x 0. Once I've set the size of this div in CSS like this
并且 div 最初是隐藏的，它没有明确设置宽度和高度值，所以它的大小是width x 0. 一旦我像这样在 CSS 中设置了这个 div 的大小
#map {
width: 500px;
height: 300px;
}
everything worked! Hope this helps someone.
一切正常！希望这可以帮助某人。
回答by changokun
For even more others that might still be having this issue,I was using a self-closing <div id="map1" />tag, and the second div was not showing, and did not seem to be in the dom. as soon as i changed it to two open&close tags <div id="map1"></div>it worked. hth
对于可能仍然存在此问题的更多其他人，我使用了自关闭<div id="map1" />标签，并且第二个 div 没有显示，并且似乎不在 dom 中。一旦我将其更改为两个打开和关闭标签，<div id="map1"></div>它就起作用了。第
回答by VB.Net Programmer
I had single quotes in my
我在我的单引号
var map = new google.maps.Map( document.getElementById('map_canvas') );
and replaced them with double quotes
并用双引号替换它们
var map = new google.maps.Map( document.getElementById("map_canvas") );
This did the trick for me.
这对我有用。
回答by Mike
Also take care not to write
还要注意不要写
google.maps.event.addDomListener(window, "load", init())
correct:
正确的：
google.maps.event.addDomListener(window, "load", init)
回答by Johnny5k
Changing the ID (in all 3 places) from "map-canvas" to "map" fixed it for me, even though I had made sure the IDs were the same, the div had a width and height, and the code wasn't running until after the window load call. It's not the dash; it doesn't seem to work with any other ID than "map".
将 ID（在所有 3 个位置）从“map-canvas”更改为“map”为我修复了它，即使我已确保 ID 相同，div 具有宽度和高度，并且代码不是运行直到窗口加载调用之后。这不是破折号；它似乎不适用于“地图”以外的任何其他 ID。
