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

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

你有什么线索吗?


当前回答

在我处理的一个案例中,地图div是有条件地呈现的,这取决于位置是否被公开。如果你不能确定是否地图画布div将在页面上,只需检查你的文档。getElementById返回一个元素,只在它存在时调用映射:

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

其他回答

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

在我处理的一个案例中,地图div是有条件地呈现的,这取决于位置是否被公开。如果你不能确定是否地图画布div将在页面上,只需检查你的文档。getElementById返回一个元素,只在它存在时调用映射:

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

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

换句话说,确保您的id匹配。;)

这里的问题是API链接没有关键参数:

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

这种方法很好。

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

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