L'API di Google Maps genera "Errore di riferimento non rilevato: google non è definito" solo quando si utilizza AJAX


85

Ho una pagina che utilizza l'API di Google Maps per visualizzare una mappa. Quando carico direttamente la pagina, viene visualizzata la mappa. Tuttavia, quando provo a caricare la pagina utilizzando AJAX, ottengo l'errore:

Uncaught ReferenceError: google is not defined

Perchè è questo?

Questa è la pagina con la mappa:

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

E questa la pagina con la chiamata 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>

Grazie per l'aiuto.

Risposte:


88

L'API non può essere caricata dopo che il documento ha terminato il caricamento per impostazione predefinita, dovrai caricarlo in modo asincrono.

modificare la pagina con la mappa:

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

Per maggiori dettagli, dai un'occhiata a: /programming/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

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


Grazie! Ha perfettamente senso ora. Ho appena avuto un follow-up: la mia mappa viene visualizzata in grigio (con logo, link e termini di utilizzo di Google però). Posso vedere in Firebug che le tessere si stanno caricando. Sai quale potrebbe essere il motivo?
più verde

Di solito questo è il risultato di un'opzione di mappa mancante / non valida come zoom, mapTypeId o center (sono tutti obbligatori, quando mancano o è stato assegnato un valore non valido, non esiste un valore predefinito per un fallback, la mappa non può essere reso)
Dottor Molle

1
Il problema ha a che fare con il fatto che sto nascondendo il div in cui appare la mappa. Ho una domanda separata per questo qui: stackoverflow.com/questions/14263472/…
più verde

39

So che questa risposta non è direttamente correlata al problema di questa domanda, ma in alcuni casi si verificherà il problema "Uncaught ReferenceError: google non è definito" se il tuo file js viene chiamato prima dell'API di Google Maps che stai utilizzando ... quindi NON FARE questo:

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

la mia API di Google Maps include è sopra il mio js auto-definito, ma ricevo ancora questo errore ma non sempre. A volte, si carica bene. Devo intercettare questo errore ma non ho idea di quale sia la causa.
JkAlombro

Il riferimento a @JkAlombro ha accettato la risposta nel link sottostante. Penso che copra la maggior parte dei casi in cui dovresti essere particolarmente preoccupato per l'ordine dei tuoi file di libreria JScript. Potresti anche prendere in considerazione l'utilizzo di una connessione asincrona per gestirlo meglio come suggerito nella risposta originale per questo thread. stackoverflow.com/questions/4987977/...
Rex CoolCode Charles

8

A prima vista, stai inizializzando qualcosa prima della tua funzione di inizializzazione: var directionsService = new google.maps.DirectionsService();

Spostalo nella funzione, in modo che non proverà ad eseguirlo prima che la pagina venga caricata.

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

5

Errore di riferimento non rilevato: l'errore google non è definito scompare quando viene rimosso il differimento asincrono dal tag dello script dell'API della mappa.


3

Quello che ha funzionato per me dopo aver seguito tutte le tue soluzioni alternative è stato chiamare l'API:

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

prima del mio: <div id="map"></div>

Sto usando .ASP NET (MVC)


0

Per me

Aggiungendo questa linea

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

Prima di questa linea.

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

lavorato


0

Potrebbe non essere rilevante per tutti, ma questo piccolo dettaglio faceva sì che il mio non funzionasse:

Cambia div da questo:

<div class="map">

A questa:

<div id="map">

-2

Forse usando

<body onload="initialize();">

invece di

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

posso aiutarti.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.