谷歌地图错误：a 为空答案

【问题标题】：Google map error: a is null谷歌地图错误：a 为空
【发布时间】：2020-08-24 22:50:48
【问题描述】：

我有一个我想使用谷歌地图的程序。问题是我收到一个错误，说 a 为空，其中 a 是谷歌地图 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>

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

编辑：这是错误消息：

a 为空从LatLngToPoint(a=null) yg(a=null, b=Object { zoom=7, maxZoom=12, 更多...}) d(d=文档 Default.aspx?lat=30.346317&lng=105.46313, f=[function()]) d(a=未定义) d() [Break On This Error] function Qf(a){a=a.f[9];return a!=i?a:...);function sg(a){a[ic]&&a[ic]Vb}

【问题讨论】：

确保 javascript 在 DOMReady 或等效事件（window.onload 等）中加载。
你显示的代码看起来和我的功能代码一模一样（虽然我省略了 maxZoom），所以我认为错误不在上面的 sn-p 中

标签： javascript google-maps

【解决方案1】：

确保您指定了包含地图的元素的大小。例如：

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

还要确保您的地图变量是在全局范围内定义的，并且加载 DOM 后初始化地图。

【讨论】：

别忘了加<div id="map-canva">
对我来说，<div id="map-canvas"></div> 必须出现在 JavaScript 之前而不是之后
通过添加大小和 id="map" 为我使用最新的 Google 地图脚本。
也检查 id 名称中的拼写错误:)

【解决方案2】：

您可能没有监听页面完全加载时触发的onload 事件。因此，您的脚本正在运行，但您正在创建的 div 尚不存在。使用 jQuery 来监听这个事件，像这样：

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

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

【讨论】：

我有一个document.ready函数调用了一个init函数，里面包含了我贴出来的js代码（我要确保所有的params都通过了）
所有浏览器都会出现这种情况？
是的，但我得到一个未捕获的类型错误：当我在谷歌浏览器中运行它时，无法读取 null 的属性“offsetWidth”
那么你需要使用 jQuery 来确保浏览器的独立性。

【解决方案3】：

这个相当神秘的错误意味着脚本找不到地图 div。这可能有几个原因。

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

检查您的 id（或类）并确保您所指的元素确实存在。

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

这是一个 jQuery 示例。请注意，我们在文档就绪时触发初始化，而不是在 DOMReady 上。我冒昧地将脚本包装在一个闭包中。

(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 解决方案。

【讨论】：

谢谢，即使使用 document.ready 也会出现间歇性地图错误，这似乎已解决。

【解决方案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);
}

我希望这也可以帮助其他人；）

【讨论】：

【解决方案5】：

这发生在地图尚未加载时。您应该在 Maps API JavaScript 加载后构建您的地图。仅当 API 完全加载后才执行初始化地图的函数，并将其传递给 Maps API 引导程序中的“回调”参数。

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

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

这实际上在 Maps API 文档here 中。希望这会有所帮助！

【讨论】：

【解决方案6】：

确保您的画布 div（与地图关联的 Div）存在。有时，如果我们重命名 div 的 id 属性。然后它会产生问题，因为它没有得到画布 div。

【讨论】：

【解决方案7】：

我已经修复了它从“div”标签中删除了我的“style”属性，并在一个 css 文件中正确声明它

【讨论】：

css 样式如何与 js 中的 null var 相关联？

【解决方案8】：

我曾经遇到过这个错误。确保地图脚本仅在使用地图的页面上运行。您可以使用“如果”来检查地图是否存在。像这样的：

if ($('mapClass').length>0) { // here you run the google maps functions }

再见

【讨论】：

【解决方案9】：

已解决，google 地图类型错误，请确保使用 alert(map) 正确返回 object var map = document.getElementById('map-canvas')。检查 div 容器 id 名称是否与 getElementByid 中指定的相同。

我也遇到了相同类型的错误，通过检查 getElementByid('map-canvas') 来修复它。示例代码enter link description here

【讨论】：

【解决方案10】：

我的回答有点老了，但对于那些仍然来这里参考的人，我有一个类似的解决方案。我把这里指定的地图初始化代码https://developers.google.com/maps/documentation/javascript/adding-a-google-map

内部 jQuery 文档准备功能。以下是适用于我的代码：

$(document).ready(function () {
    var uluru = {lat: -25.344, lng: 131.036}; 
    var map = new google.maps.Map( document.getElementById('embedmap'), {zoom: 14, center: uluru} ); 
    var marker = new google.maps.Marker({position: uluru, map: map});

});

【讨论】：