【问题标题】：Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of nullGoogle MAP API 未捕获类型错误：无法读取 null 的属性“offsetWidth”
【发布时间】：2012-07-29 06:03:09
【问题描述】：

我正在尝试通过以下代码使用 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>

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

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

我不知道，因为我按照this tutorial给出的方向。

你有什么线索吗？

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案1】：

此问题通常是由于在需要访问它的 javascript 运行之前未渲染地图 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>

【讨论】：

当我忘记条件化我的地图脚本时，这种情况总是发生在我身上。添加： var mapExists = document.getElementById("map-canvas"); if(mapExists) { // script } 让一切变得更好。

【解决方案2】：

对于可能仍然存在此问题的其他人，即使在尝试了上述建议之后，在初始化函数中为您的地图画布使用不正确的选择器也可能会导致与该函数尝试的相同问题访问不存在的东西。仔细检查您的地图 ID 在您的初始化函数和您的 HTML 中是否匹配，否则可能会引发相同的错误。

换句话说，请确保您的 ID 匹配。 ;)

【讨论】：

令人惊讶的是，您可以如此确定这不是问题……直到您仔细检查并意识到您在之前的测试中更改了它并忘记将其更改回来。 :-)

【解决方案3】：

如果您未在地图选项中指定 center 或 zoom，也会出现此错误。

【讨论】：

就是那个！从选项中删除了缩放，因为无论如何我都是稍后在脚本中设置它，并且繁荣，地图将第一次加载，但第二次会产生该错误。谢谢！！
是的，这是我的！有变焦但没有中心。只需添加中心即可修复它。
他们至少可以在控制台中记录一些消息，真的。谢谢！

【解决方案4】：

google 在示例中使用 id="map_canvas" 和 id="map-canvas"，仔细检查并重新检查 id :D

【讨论】：

【解决方案5】：

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

【讨论】：

没错，就是先渲染html div，然后js再添加一个事件监听器。

【解决方案6】：

所以我添加了我的失败场景以使其正常工作。我有一个<div id="map>，我在其中加载地图：

var map = new google.maps.Map(document.getElementById("map"), myOptions);

并且该 div 最初是隐藏，并且没有明确设置宽度和高度值，因此它的大小为width x 0。一旦我像这样在 CSS 中设置了这个 div 的大小

#map {
    width: 500px;
    height: 300px;
}

一切正常！希望这对某人有所帮助。

【讨论】：

这正是它对我不起作用的原因。您需要确保 CSS 与您的地图 ID 匹配，并且您有某种初始宽度/高度组合，否则不会呈现任何内容。回顾一下： 1. 当您在 JavaScript 中调用 getElementById 时，确保您的 html div id 与 id 选择器匹配 2. 确保 CSS 有代码来设置您的特定地图的样式，例如#map1 { 宽度：200px;高度：200px； } 或类似的，所以它呈现。

【解决方案7】：

对于更多可能仍然存在此问题的其他人，我使用了一个自动关闭的 <div id="map1" /> 标签，而第二个 div 没有显示，并且似乎不在大教堂。一旦我将其更改为两个打开和关闭标签<div id="map1"></div>，它就起作用了。 hth

【讨论】：

【解决方案8】：

还要注意不要写

google.maps.event.addDomListener(window, "load", init())

正确：

google.maps.event.addDomListener(window, "load", init)

【讨论】：

确实如此。在我的情况下，这也是一个问题。当第二个只是将 init 函数作为参数传递给事件侦听器时，第一个立即运行 init 函数，事件侦听器将在该事件发生时运行 init 函数。 stackoverflow.com/questions/13286233/…

【解决方案9】：

我的

中有单引号

var map = new google.maps.Map( document.getElementById('map_canvas') );

并用双引号替换它们

var map = new google.maps.Map( document.getElementById("map_canvas") );

这对我有用。

【讨论】：

【解决方案10】：

将 ID（在所有 3 个位置）从“map-canvas”更改为“map”为我修复了它，即使我已确保 ID 相同，div 具有宽度和高度，并且代码直到窗口加载调用之后才运行。这不是破折号。它似乎不适用于“地图”以外的任何其他 ID。

【讨论】：

【解决方案11】：

另外，请确保您没有将井号 (#) 放在选择器中的

    document.getElementById('#map') // bad

    document.getElementById('map') // good

声明。它不是一个 jQuery。只是对赶时间的人的快速提醒。

【讨论】：

【解决方案12】：

我遇到了同样的问题，但问题是缩放没有在提供给 Google 地图的选项对象中定义。

【讨论】：

【解决方案13】：

如果您在循环中创建多个地图，并且单个地图 DOM 元素不存在，则会破坏所有地图。首先，在创建新的 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);
}

[...]

【讨论】：

但所做的只是停止创建地图，而不是真正修复混乱并创建地图。

【解决方案14】：

如果您碰巧使用的是 asp.net Webforms，并且正在使用母版页在页面后面的代码中注册脚本，请不要忘记使用地图元素 (vb.net) 的 clientID：

ClientScript.RegisterStartupScript(Me.[GetType](), "Google Maps Initialization", String.Format("init_map(""" & map_canvas.ClientID() & """...

【讨论】：

【解决方案15】：

为了解决它，您需要在脚本中添加async defer。

应该是这样的：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

见here异步延迟的含义。

由于您将从主 js 文件调用一个函数，因此您还需要确保这是在您加载主脚本的那个之后。

【讨论】：

【解决方案16】：

确保在首次加载 API 时包含 Places 库 &libraries=places 参数。

例如：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

【讨论】：

【解决方案17】：

我知道我参加聚会有点晚了，只是想补充一点，当页面中不存在 div 时也会发生错误。您还可以在加载谷歌地图函数调用之前先检查 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
     }
}

【讨论】：

【解决方案18】：

在您的 HTML 中设置 ng-init=init()
在控制器中

使用 $scope.init = function() {...} 而不是 google.maps.event.addDomListener(window, "load", init){...}

希望这会对你有所帮助。

【讨论】：

【解决方案19】：

实际上解决这个问题的最简单方法就是在 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>

【讨论】：

【解决方案20】：

在我的情况下，这些问题是使用 defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script 解决的

<script src="<your file>.js" defer></script>

你需要考虑浏览器对这个选项的支持（我没有看到问题）

【讨论】：

【解决方案21】：

检查您没有覆盖window.self

我的问题：我创建了一个组件并写了 self = this 而不是 var self = this。如果不使用关键字var，JS会将那个变量放在window对象上，所以我重写了window.self导致这个错误。

【讨论】：

【解决方案22】：

这是对先前删除的帖子的编辑，以在答案本身中包含链接答案的内容。重新发布此答案的目的是为同样偶然发现此问题的 React 0.9+ 用户提供 PSA。

原始编辑帖子

在关注this blog post 时使用 ReactJS 时也出现此错误。 sahat 的评论 here 帮助 - 请参阅下面 sahat 评论的内容。

❗️ React 的注意事项 >= 0.9

在 v0.9 之前，DOM 节点作为最后一个参数传入。如果你使用 this，你仍然可以通过调用 this.getDOMNode() 来访问 DOM 节点。

也就是说，在最新版本的 React 中将 rootNode 参数替换为 this.getDOMNode()。

【讨论】：

【解决方案23】：

我的失败是使用

zoomLevel

作为一个选项，而不是正确的选项

zoom

【讨论】：

【解决方案24】：

在 map api 键调用开始时添加异步延迟。

【讨论】：

【解决方案25】：

在我处理的一个案例中，地图 div 会根据位置是否被公开而有条件地呈现。如果您不能确定地图画布 div 是否会出现在页面上，只需检查您的 document.getElementById 是否正在返回一个元素，并且仅在它存在时才调用地图：

var mapEle = document.getElementById("map_canvas");
if (mapEle) {
    map = new google.maps.Map(mapEle, myOptions);
}

【讨论】：

【解决方案26】：

这里的问题是没有 key 参数的 API 链接：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&key=YOURKEY"></script>

这种方式效果很好。

【讨论】：