Die Google Maps-API löst nur bei Verwendung von AJAX "Nicht erfasster Referenzfehler: Google ist nicht definiert" aus

85

Ich habe eine Seite, die die Google Maps-API verwendet, um eine Karte anzuzeigen. Wenn ich die Seite direkt lade, wird die Karte angezeigt. Wenn ich jedoch versuche, die Seite mit AJAX zu laden, wird folgende Fehlermeldung angezeigt:

Uncaught ReferenceError: google is not defined

Warum ist das?

Dies ist die Seite mit der Karte:

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

Und das ist die Seite mit dem AJAX-Aufruf:

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

Danke für Ihre Hilfe.

ajax google-maps-api-3 grüner
quelle

Antworten:

87

Die API kann standardmäßig nicht geladen werden, nachdem das Dokument vollständig geladen wurde. Sie müssen es asynchron laden.

Ändern Sie die Seite mit der Karte:

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

Weitere Informationen finden Sie unter: /programming/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

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

Dr.Molle
quelle
Vielen Dank! Macht jetzt vollkommen Sinn. Ich hatte gerade ein Follow-up: Meine Karte ist komplett ausgegraut (mit Google-Logo, Link und Nutzungsbedingungen). Ich kann in Firebug sehen, dass die Kacheln geladen werden. Wissen Sie, was der Grund sein könnte?
grüner
Normalerweise ist dies das Ergebnis einer fehlenden / ungültigen Kartenoption wie zoom, mapTypeId oder center (alle sind erforderlich, wenn sie fehlen oder ein ungültiger Wert zugewiesen wurde, gibt es keinen Standardwert für einen Fallback, die Karte konnte nicht gerendert werden)
Dr.Molle
1
Das Problem hat damit zu tun, dass ich das Div verstecke, in dem die Karte erscheint. Ich habe eine separate Frage dafür hier: stackoverflow.com/questions/14263472/…
grüner
38

Ich weiß, dass diese Antwort nicht direkt mit dem Problem dieser Fragen zusammenhängt, aber in einigen Fällen tritt das Problem "Nicht erfasster Referenzfehler: Google ist nicht definiert" auf, wenn Ihre JS-Datei vor der von Ihnen verwendeten Google Maps-API aufgerufen wird ... Also tu das NICHT:

<script type ="text/javascript" src ="SomeJScriptfile.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
Rex CoolCode Charles
quelle
Mein Google Maps API-Include liegt über meinem selbst definierten JS. Es wird zwar immer noch dieser Fehler angezeigt, aber nicht immer. Manchmal lädt es ganz gut. Ich muss diesen Fehler abfangen, habe aber keine Ahnung, was die Ursache ist.
JkAlombro
@ JkAlombro Referenz akzeptiert Antwort im Link unten. Ich denke, es deckt die meisten Fälle ab, in denen Sie sich besonders Gedanken über die Reihenfolge Ihrer JScript-Bibliotheksdateien machen sollten. Möglicherweise möchten Sie auch eine asynchrone Verbindung verwenden, um dies besser zu verwalten, wie in der ursprünglichen Antwort für diesen Thread vorgeschlagen. stackoverflow.com/questions/4987977/…
Rex CoolCode Charles
8

Vermutlich initialisieren Sie etwas vor Ihrer Initialisierungsfunktion: var directionsService = new google.maps.DirectionsService();

Verschieben Sie das in die Funktion, damit es nicht versucht, es auszuführen, bevor die Seite geladen wird.

var directionsDisplay, directionsService;
var map;
function initialize() {
  directionsService = new google.maps.DirectionsService();
  directionsDisplay = new google.maps.DirectionsRenderer();
Duncan
quelle
5

Nicht erfasster Referenzfehler: Google ist nicht definiert. Der Fehler wird behoben, wenn der asynchrone Verzögerer aus dem Map-API-Skript-Tag entfernt wird.

Sohan Jangid
quelle
3

Nachdem ich alle Problemumgehungen befolgt hatte, funktionierte für mich der Aufruf der API:

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

vor meinem: <div id="map"></div>

Ich verwende .ASP NET (MVC)

Fotini Pipi
quelle
0

Für mich

Hinzufügen dieser Zeile

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

Vor dieser Zeile.

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

hat funktioniert

Rupesh
quelle
0

Könnte nicht für alle relevant sein, aber dieses kleine Detail hat dazu geführt, dass meine nicht funktioniert hat:

Ändern Sie div davon:

<div class="map">

Dazu:

<div id="map">
Jack Riminton
quelle
-2

Vielleicht mit

<body onload="initialize();">

anstatt 

$(function(){ 
     initialize();
});

kann dir helfen.

rotring05
quelle