谷歌地图 API 抛出“未捕获的参考错误: 谷歌没有定义”只有当使用 AJAX

我有一个页面，使用谷歌地图 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>

谢谢你的帮助。

352144 次浏览
小开

At a guess, you're initialising something before your initialize function:

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

Move that into the function, so it won't try and execute it before the page is loaded.

var directionsDisplay;
var directionsService;
var map;


function initialize() {
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
}
小开
最佳答案

The API can't be loaded after the document has finished loading by default, you'll need to load it asynchronous.

modify the page with the map:

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

For more details take a look at: https://stackoverflow.com/questions/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

Example: http://jsfiddle.net/doktormolle/zJ5em/

小开

I know this answer is not directly related to this questions' issue but in some cases the "Uncaught ReferenceError: google is not defined" issue will occur if your js file is being called prior to the google maps api you're using...so DON'T DO this:

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

For me

Adding this line

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

Before this line.

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

worked

小开

Uncaught ReferenceError: google is not defined error will be gone when removed the async defer from the map API script tag.

小开

What worked for me after following all your workarounds was to call the API:

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

before my : <div id="map"></div>

I am using .ASP NET (MVC)

小开

I tried on different browsers and the answer for me was that is very important have in script tag this type="text/javascript"

It's very important to add to every js script for browser compatibility

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

After this the issues like Uncaught ReferenceError: google is not defined or others (that can't load any referece are gone)

小开

Uncaught ReferenceError:

google is not defined, google related stuff has not been loaded yet and we are using it that causes this error. In the following code snippet, we see both cases will generate the error. We can move the definition of google related stuff inside initMap method or load the function in question a little base later.

    //shows the error
google.maps.Polygon.prototype.getBounds1 = function (latLng) {
...
};
function initMap() {
...
//should be here inside the initMap
}
//error with the following
google.maps.Polygon.prototype.getBounds1 = function (latLng) {
...
};
小开

In my case non of above solution work....due to not loading google script. So I just checking recursively ...when google loaded it will call original function.

function checkMapLoaded() {
if (typeof google === "undefined") {
setTimeout(checkMapLoaded, 1000);
} else {
// do some work here
initSchMap();
}
}
小开

Gstatic is a domain that is owned by Google. It has a special role in helping the content on Google to load faster from their CDN or content delivery network.

Just add this line in <HTML></HTML>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

The Google Chart her!


提交答案