blocks|key|2675432|text|我意识到这可能有点晚了--但希望它能帮助其他人：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2675433|在您的示例中，初始化函数不是激发函数，尽管它也可能是由未在容器div上设置的宽度和高度属性引起的。如果不想简单地将load事件添加到body标记中，可以使用以下jQuery：|2675434|//Add+onload+to+body
$(window).load(function(){
++++initialize()
});|code-block|syntax|javascript|2675435|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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:

<pre><code>//Add onload to body
$(window).load(function(){
 initialize()
});
</code></pre>

blocks|key|824906|text|你可能在AngularJS工作吗？是的，这个问题一直存在于上述所有解决方案之上。原因是我定位地图div的部分没有及时完成，因此div是空的，因此出现了错误。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|824907|在这里看到调用GoogleMaps的角度方式：|824908|Initialize+Google+Map+in+AngularJS|offset|length|824909|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/11180750/initialize-google-map-in-angularjs^0|0|0|0|Y|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

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.

See the Angular way to call GoogleMaps here:

<a href="https://stackoverflow.com/questions/11180750/initialize-google-map-in-angularjs">Initialize Google Map in AngularJS</a>

blocks|key|2656842|text|这是因为脚本在加载DOM元素之前运行。一个简单的解决方案是将其放入一个函数中，并在加载完成后触发它。请参阅以下问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2656843|Google+MAP+API+Uncaught+TypeError:+Cannot+read+property+'offsetWidth'+of+null|offset|length|2656844|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/11740663/google-map-api-uncaught-typeerror-cannot-read-property-offsetwidth-of-null^0|0|0|25|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

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:

<a href="https://stackoverflow.com/questions/11740663/google-map-api-uncaught-typeerror-cannot-read-property-offsetwidth-of-null">Google MAP API Uncaught TypeError: Cannot read property &#39;offsetWidth&#39; of null</a>

blocks|key|2675587|text|大多数情况下，我会得到这个错误，这仅仅是因为我在getElementById中引用的元素不在页面上，或者我使用了错误的id。明显的错误，但是在深入到更先进的解决方案之前，一定要仔细检查一下。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2675588|entityMap^0|O|E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Most of the time I'm getting this error it is just because the element I'm referring to in <code>getElementById</code> is 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.

blocks|key|820424|text|不确定，但可能是这条线|type|unstyled|depth|inlineStyleRanges|entityRanges|data|820425|map_4e60b1f9c94ae.setCenter(new+google.maps.LatLng(0,+0,+1));|code-block|syntax|javascript|820426|我认为new+google.maps.LatLng只具有两个属性，即纬度和经度。|offset|length|style|CODE|820427|从地图站点尝试这一点|820428|var+latlng+=+new+google.maps.LatLng(-34.397,+150.644);|820429|http://code.google.com/apis/maps/documentation/javascript/tutorial.html|820430|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|3|M|0|0|0|0|1Z|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@$I|12|J|13|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|16|8|@]|9|@$I|17|J|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|R]]]]

Not sure, but it could be this line

<pre><code>map_4e60b1f9c94ae.setCenter(new google.maps.LatLng(0, 0, 1));
</code></pre>

I think <code>new google.maps.LatLng</code> takes only two attributes, the latitude and the longitude.

Try this bit from the maps site

<pre><code>var latlng = new google.maps.LatLng(-34.397, 150.644);
</code></pre>

<a href="http://code.google.com/apis/maps/documentation/javascript/tutorial.html" rel="nofollow">http://code.google.com/apis/maps/documentation/javascript/tutorial.html</a>

blocks|key|2675479|text|尝试将JavaScript代码放入正文和div+id="map_canvas"之后|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2675480|就像这样：|2675481|<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>|code-block|syntax|javascript|2675482|entityMap^0|K|J|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

Try to put JavaScript code in body and AFTER <code>div id="map_canvas"</code>

Something like this:

<pre><code>&lt;body&gt;
 &lt;div id="map_canvas"&gt;&lt;/div&gt;

 &lt;script type="text/javascript"&gt;
 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));
 &lt;/script&gt;
&lt;/body&gt;
</code></pre>

i have a problem with displaying GoogleMap.

Here is the website source code: <a href="http://pastebin.com/LjhVbEF7">http://pastebin.com/LjhVbEF7</a>

When i'm trying to run this website, map is not displayed. 
Firebug console says <code>Uncaught TypeError: Cannot read property 'offsetWidth' of null</code>

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 ?

GoogleMap offsetWidth problem

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我在显示GoogleMap时有问题。以下是网站源代码：当我试图运行这个网站时，地图不会显示。Firebug控制台说是Uncaught TypeError: Cannot read property 'offsetWidth' of null你知道我做错了什么吗？我知道网络上有很多有用的例子，但是这段代码是由一个特殊的脚本生成的，我无法对它进行过多的干预。也许我忘了设置变量了？谢谢你，迈克=====

问GoogleMap offsetWidth问题
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问GoogleMap offsetWidth问题EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问GoogleMap offsetWidth问题
EN