谷歌MAP API Uncaught TypeError:无法读取属性'的空

我试图使用下面的代码使用谷歌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>

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

无法读取属性“offsetWidth”为空

我不知道，因为我遵循本教程给出的方向。

你有什么线索吗?

327917 次浏览
小开
最佳答案

这个问题通常是由于地图div在需要访问它的javascript运行之前没有被渲染。

您应该将初始化代码放在onload函数内或HTML文件的底部，就在标记之前，这样DOM在执行之前就会完全呈现(注意，第二个选项对无效HTML更敏感)。

注意，正如matthewsheets所指出的那样，这也可能是由于div的id在你的HTML中根本不存在(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>
小开

Year, 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>
小开

对于其他可能仍然有这个问题的人，即使在尝试了上述建议之后，在初始化函数中为你的地图画布使用不正确的选择器也会导致同样的问题，因为函数试图访问不存在的东西。仔细检查你的map Id是否匹配你的初始化函数和HTML，否则同样的错误可能会被抛出。

换句话说，确保您的id匹配。；）

小开

对于更多可能仍有这个问题的人来说，我使用了一个自关闭的<div id="map1" />标签，第二个div没有显示，似乎不在dom中。只要我把它改成两个打开&关闭标签<div id="map1"></div>，它就工作了。hth

小开

这样我就把失败的情况加进去了。我有一个<div id="map>，其中我正在加载地图:

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

div最初是隐藏的，它没有显式设置宽度和高度值，所以它的大小是width x 0。一旦我像这样在CSS中设置了这个div的大小

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

一切工作!希望这能帮助到一些人。

小开

谷歌在样例中使用id="map_canvas"和id="map-canvas"，反复检查id:D

小开

改变ID(在所有3个地方)从“map-canvas”到“map”为我修复了它，即使我已经确保ID是相同的，div有宽度和高度，代码直到窗口加载调用后才运行。不是破折号;除了“map”，它似乎不能与任何其他ID一起工作。

小开

我在我的

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

然后用双引号代替

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

这招对我很管用。

小开

还要注意不要写信

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

正确的:

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

同样，确保你没有在选择器中放置散列符号(#)

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


document.getElementById('map') // good

声明。它不是jQuery。给赶时间的人一点提醒。

小开

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

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

如果你没有在你的地图选项中指定center或zoom，你也会得到这个错误。

小开

如果在循环中创建多个映射，如果单个映射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);
}


[...]
小开

我有同样的问题，但问题是，缩放没有在给谷歌地图的选项对象内定义。

小开

为了解决这个问题，你需要在脚本中添加async defer。

应该是这样的:

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

请参见在这里 async defer的含义。

因为你将从主js文件中调用一个函数，你还想确保它在你加载主脚本的那个文件之后。

小开
  • 在HTML中设置ng-init=init()

  • 在控制器中

    < p >使用美元范围。Init = function(){…} 而不是google。maps。event。addDomListener(window， "load"， init){…李}< / p > < / >

希望这对你有所帮助。

小开

实际上最简单的方法来解决这个问题，只是移动你的对象之前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链接没有key参数:

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

这种方法很好。

小开

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

例如:

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

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

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

小开

这是对之前删除的帖子的编辑，以包含链接的答案的内容，在答案本身。重新发布这个答案的目的是作为React 0.9+用户的一个PSA，他们也遇到了这个问题。

编辑原文

在使用ReactJS而遵循这篇博文时也得到此错误。sahat的评论在这里 help -

.

.

.

❗️注意React >= 0.9

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

换句话说，在React的最新版本中，用this.getDOMNode()替换rootNode参数。

小开

我的失败是没有使用

zoomLevel

作为一种选择，而不是正确的选择

zoom
小开

在map API键调用开始时添加async defer。

小开

在我处理的一个案例中，地图div是有条件地呈现的，这取决于位置是否被公开。如果你不能确定map canvas div是否在页面上，只需检查你的document.getElementById是否返回一个元素，并且只在它存在时调用map:

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

提交答案