Javascript GoogleMap offsetWidth 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7282425/
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
GoogleMap offsetWidth problem
提问by mbajur
i have a problem with displaying GoogleMap.
我在显示 GoogleMap 时遇到问题。
Here is the website source code: http://pastebin.com/LjhVbEF7
这是网站源代码：http: //pastebin.com/LjhVbEF7
When i'm trying to run this website, map is not displayed.
Firebug console says Uncaught TypeError: Cannot read property 'offsetWidth' of null
当我尝试运行此网站时，未显示地图。Firebug 控制台说Uncaught TypeError: Cannot read property 'offsetWidth' of null
Have you any idea what am i doing wrong? I know that there are many working examples on the net but this code is generated by a special script and i'm not able to interfere it to much. Maybe i forgot to set some variables?
你知道我做错了什么吗？我知道网上有很多有效的例子，但是这段代码是由一个特殊的脚本生成的，我不能过多地干扰它。也许我忘了设置一些变量？
thanks, Mike
谢谢，迈克
=================
==================
EDIT:This code is working only when i'll put JS in function definition and call it in body onload param. Do you have any idea how can i make it working without using such function and onload param ?
编辑：只有当我将 JS 放在函数定义中并在主体 onload 参数中调用它时，此代码才有效。您知道如何在不使用此类功能和 onload 参数的情况下使其工作吗？
回答by Chris
I realise that this is probably a bit late - but hopefully it will be able to help someone else out:
我意识到这可能有点晚了 - 但希望它能够帮助其他人：
In your case the initialise function is not firing, although it can also be caused by the width and height attributes not being set on the container div. If you don't want to simply add the load event to the body tag you can use the following jQuery:
在您的情况下，初始化函数没有触发，尽管它也可能是由于未在容器 div 上设置宽度和高度属性引起的。如果您不想简单地将 load 事件添加到 body 标记中，您可以使用以下 jQuery：
//Add onload to body
$(window).load(function(){
initialize()
});
回答by noogrub
Are you possibly working in AngularJS? I was, and this problem persisted past all the above solutions. The reason was that the partial where I located my map div was not completing in time, therefore the div was null, therefore the error you got.
你可能在 AngularJS 工作吗？我是，并且这个问题在上述所有解决方案之后仍然存在。原因是我定位我的地图 div 的部分没有及时完成，因此 div 为空，因此您得到了错误。
See the Angular way to call GoogleMaps here:
在此处查看调用 GoogleMaps 的 Angular 方式：
回答by MK Yung
This is because your script runs before loading the DOM element. A simple solution is to put it into a function and trigger it when the loading is finished. Please refer to the question below:
这是因为您的脚本在加载 DOM 元素之前运行。一个简单的解决方案是将其放入一个函数中，并在加载完成时触发它。请参考以下问题：
Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null
回答by Rick Pastoor
Most of the time I'm getting this error it is just because the element I'm referring to in getElementByIdis not on the page or I'm using the wrong id. Obvious error, but make sure to double check before diving into more advanced solutions.
大多数情况下，我收到此错误只是因为我所指的元素getElementById不在页面上，或者我使用了错误的 ID。明显的错误，但在深入研究更高级的解决方案之前，请务必仔细检查。
回答by Jason Gennaro
Not sure, but it could be this line
不确定，但可能是这条线
map_4e60b1f9c94ae.setCenter(new google.maps.LatLng(0, 0, 1));
I think new google.maps.LatLngtakes only two attributes, the latitude and the longitude.
我认为new google.maps.LatLng只需要两个属性，纬度和经度。
Try this bit from the maps site
从地图网站试试这个
var latlng = new google.maps.LatLng(-34.397, 150.644);
http://code.google.com/apis/maps/documentation/javascript/tutorial.html
http://code.google.com/apis/maps/documentation/javascript/tutorial.html
回答by Amok
Try to put JavaScript code in body and AFTER div id="map_canvas"
尝试将 JavaScript 代码放在 body 和 AFTER 中 div id="map_canvas"
Something like this:
像这样的东西：
<body>
<div id="map_canvas"></div>
<script type="text/javascript">
var map_4e60b1f9c94ae = new google.maps.Map(document.getElementById("map_canvas"), {"mapTypeId":"roadmap","zoom":10});
map_4e60b1f9c94ae.setCenter(new google.maps.LatLng(0, 0, 1));
</script>
</body>
