Google Maps API 仅在使用 AJAX 时抛出“Uncaught ReferenceError: google is not defined”

Posted 2023-02-23

技术标签:

【中文标题】Google Maps API 仅在使用 AJAX 时抛出“Uncaught ReferenceError: google is not defined”【英文标题】：Google Maps API throws "Uncaught ReferenceError: google is not defined" only when using AJAX 【发布时间】：2012-12-23 04:10:52 【问题描述】：

我有一个使用 Google Maps API 显示地图的页面。当我直接加载页面时，会出现地图。但是，当我尝试使用 AJAX 加载页面时，出现错误：

Uncaught ReferenceError: google is not defined

这是为什么？

这是有地图的页面：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() 
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions =  zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago 
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsDisplay.setMap(map);

$(document).ready(function(e)  initialize() );
</script>
<div id="map_canvas" style="height: 354px; width:713px;"></div>

这是带有 AJAX 调用的页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(e) 
    $('button').click(function()
        $.ajax(
            type: 'GET', url: 'map-display',
            success: function(d)  $('#a').html(d); 
        )
    );
);
</script>
<button>Call</button>
<div id="a"></div>
</body>
</html>

感谢您的帮助。

【问题讨论】：

【参考方案1】：

文档加载完成后默认无法加载API，需要异步加载。

用地图修改页面：

<div id="map_canvas" style="height: 354px; width:713px;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script>
var directionsDisplay,
    directionsService,
    map;

function initialize() 
  var directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions =  zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP, center: chicago 
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  directionsDisplay.setMap(map);


</script>

更多详情请看：https://***.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

示例：http://jsfiddle.net/doktormolle/zJ5em/

【讨论】：

谢谢！现在完全有道理。刚刚进行了跟进：我的地图全部显示为灰色（但带有 Google 徽标、链接和使用条款）。我可以在 Firebug 中看到瓷砖正在加载。你知道可能是什么原因吗？通常这是由于缺少/无效的地图选项，如缩放、mapTypeId 或中心（所有这些都是必需的，当它们丢失或分配了无效值时，没有默认值- 后备值，无法渲染地图）问题与我隐藏了显示地图的 div 的事实有关。我在这里有一个单独的问题：***.com/questions/14263472/…【参考方案2】：

我知道这个答案与这个问题的问题没有直接关系，但在某些情况下，如果在您使用的 google maps api 之前调用您的 js 文件，则会出现“未捕获的 ReferenceError：google is not defined”问题...所以不要这样做：

<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

【讨论】：

我的谷歌地图 api 包含在我自定义的 js 之上，但仍然出现此错误，但并非总是如此。有时，它加载得很好。我需要捕获这个错误，但我不知道是什么原因。 @JkAlombro 在下面的链接中参考接受的答案。我认为它涵盖了您应该特别关注 JScript 库文件顺序的大多数情况。您可能还想考虑使用异步连接来更好地管理此线程的原始答案中的建议。 ***.com/questions/4987977/…【参考方案3】：

未捕获的 ReferenceError: google is not defined 错误将在从地图 API 脚本标签中删除 async defer 时消失。

【讨论】：

【参考方案4】：

猜想，你在初始化函数之前初始化了一些东西：

var directionsService = new google.maps.DirectionsService();

将它移到函数中，这样它就不会在页面加载之前尝试执行它。

var directionsDisplay;
var directionsService;
var map;

function initialize() 
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();

【讨论】：

【参考方案5】：

在遵循所有解决方法后对我有用的是调用 API：

 <script async defer src="https://maps.googleapis.com/maps/api/js?key=you_API_KEY&callback=initMap&libraries=places"
            type="text/javascript"></script>

在我之前：<div id="map"></div>

我正在使用 .ASP NET (MVC)

【讨论】：

【参考方案6】：

我尝试了不同的浏览器，对我来说答案是非常重要在脚本标签中这个类型="text/javascript"

在每个js脚本中添加浏览器兼容性很重要

<script type="text/javascript" src="ANY_FILE_OR_URL"></script>

在此之后的问题像 Uncaught ReferenceError: google is not defined 或其他（不能加载任何参考的都没有了）

【讨论】：

嗯，是的，这适用于任何 JS 文件，而不仅仅是这个【参考方案7】：

对我来说

添加这一行

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

在这一行之前。

<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>

工作

【讨论】：

是的，这就是this answer says

以上是关于Google Maps API 仅在使用 AJAX 时抛出“Uncaught ReferenceError: google is not defined”的主要内容，如果未能解决你的问题，请参考以下文章

通过 AJAX 加载 Google Maps API，控制台错误

对 Google Maps API 的 AJAX 请求停止工作

Google Maps javascript Api 不适用于本地主机

Django - 部署时 Google Maps API Uncaught in promise 错误

Google Maps V3：仅在视口中显示标记 - 清除标记问题

为啥 Google Maps Cordova ionic angular 仅在 Android 中工作而在 IOS 中为空白？