89

我有一个使用 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>

谢谢你的帮助。

4

7 回答 7

92

默认情况下，文档加载完成后无法加载 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 ://stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

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

于 2013-01-09T12:45:29.293 回答
39

我知道这个答案与这个问题的问题没有直接关系，但在某些情况下，如果在您使用的 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>
于 2014-07-16T03:57:02.597 回答
9

Uncaught ReferenceError: google is not defined 当从地图 API 脚本标签中删除异步延迟时，错误将消失。

于 2019-05-07T07:45:11.217 回答
8

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

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

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

var directionsDisplay;
var directionsService;
var map;

function initialize() {
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
}
于 2013-01-09T09:07:17.993 回答
3

在遵循所有解决方法后对我有用的是调用 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)

于 2019-07-30T12:50:29.177 回答
1

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

为了浏览器的兼容性，添加到每个 js 脚本中非常重要

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

在此之后，类似 Uncaught ReferenceError: google is not defined或其他问题（无法加载任何参考的问题都消失了）

于 2021-03-28T00:00:57.207 回答
-1

为了我

添加这一行

<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>

工作过

于 2016-01-30T16:43:51.580 回答