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

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

你有什么线索吗?


当前回答

在我的案例中,这些问题都是使用defer https://developer.mozilla.org/en/docs/Web/HTML/Element/script解决的

<脚本src=“<你的文件>.js”

不过,您需要考虑浏览器对该选项的支持(我还没有看到问题)

其他回答

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

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

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

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

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

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>

我的失败是没有使用

zoomLevel

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

zoom

如果你没有在地图选项中指定居中或缩放,你也会得到这个错误。

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

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