Google地图错误:a为空

Question

我有一个程序,我想使用谷歌地图.问题是我得到一个错误,表示a为null,其中a是google map api中使用的var.以下是我调用谷歌地图的方式:

//Creates a new center location for the google map
    var latlng = new google.maps.LatLng(centerLatitude, centerLongitude);

    //The options for the google map
    var myOptions = {
        zoom: 7,
        maxZoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

这是我的HTML标记的样子:

<div id = "map_canvas"></div>

我通过网址获取页面加载的lat和lng.这些值正确传递,所以我知道这不是问题.我认为这与var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);不正确有关.有什么建议？

编辑:这是错误消息:

a从nullLngToPoint(a = null)yg(a = null,b = Object {zoom = 7,maxZoom = 12,more ...})d(d = Document Default.aspx？lat = 30.346317&lng = 105.46313,f = [function()])d(a =未定义)d()[打破此错误]函数Qf(a){a = af [9];返回a!= i？a:...);函数sg的(a){A [k] &&一个[IC] Vb的}

Answer 1

确保指定包含地图的元素的大小.例如:

<div id="map_canvas" style="width: 500px; height: 500px;"></div>

还要确保在全局范围内定义了map变量,并在加载DOM后初始化映射.

Answer 2

您可能没有收听onload页面完全加载时触发的事件.因此,您的脚本正在运行,但div您正在创建的脚本尚不存在.使用jQuery来监听这个事件,如下所示:

$(document).ready(function () {
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});

如果您不想使用jQuery,那么添加一个事件监听器 body.onload

Answer 3

这个相当神秘的错误意味着脚本无法找到map div.这可能由于几个原因而发生.

1.您使用错误的ID来引用地图.

检查你的id(或类)并确保你所指的元素确实存在.

2.您在DOM准备好之前执行脚本.

这是一个jQuery示例.请注意,我们正在触发文档就绪的初始化,而不是onDOMReady.我冒昧地将脚本包装在一个闭包中.

(function($) {
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);
  }
  $(document).ready(initialize);
})(jQuery)

你也可以使用:

google.maps.event.addDomListener(window, 'load', initialize);

如果您更喜欢Google解决方案.

Answer 4

有完全相同的问题,这是我为我修复它.

事情是我在我的网站上有2个谷歌地图 - 一个在页脚,另一个在联系页面,但我在一个JS文件中调用它们,如下所示:

var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);
var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);

但问题是该对象id="map-canvas"仅位于联系页面上.所以首先你必须检查页面上是否存在该元素,如下所示:

if ($("#map-canvas-footer").length > 0){
    var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);        
}

if ($("#map-canvas").length > 0){
    var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);
}

我希望这也可以帮助其他人;)