Interfejs API Map Google wyświetla komunikat „Uncaught ReferenceError: Google is not defined” tylko w przypadku korzystania z AJAX

Question 1

Mam stronę korzystającą z interfejsu API Map Google do wyświetlania mapy. Kiedy ładuję stronę bezpośrednio, pojawia się mapa. Jednak gdy próbuję załadować stronę za pomocą AJAX, pojawia się błąd:

Uncaught ReferenceError: google is not defined

Dlaczego to?

To jest strona z mapą:

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

A oto strona z wywołaniem 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>

Dzięki za pomoc.

Question 2

Interfejs API nie może zostać załadowany po zakończeniu ładowania dokumentu domyślnie, musisz załadować go asynchronicznie.

zmodyfikuj stronę z 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>

Aby uzyskać więcej informacji, spójrz na: /programming/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

Przykład: http://jsfiddle.net/doktormolle/zJ5em/

Question 3

Wiem, że ta odpowiedź nie jest bezpośrednio związana z problemem tego pytania, ale w niektórych przypadkach problem „Uncaught ReferenceError: google is not defined” wystąpi, jeśli plik js jest wywoływany przed używanym przez Ciebie interfejsem API Google Maps ... więc NIE ROBIĆ tego:

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

Question 4

Chyba inicjalizujesz coś przed funkcją inicjalizacji: var directionsService = new google.maps.DirectionsService();

Przenieś to do funkcji, aby nie próbowała go wykonywać przed załadowaniem strony.

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

Question 5

Uncaught ReferenceError: Google is not specified. Błąd zniknie po usunięciu opóźnienia asynchronicznego z tagu map API script.

Question 6

Po wykonaniu wszystkich Twoich obejść zadziałało dla mnie wywołanie interfejsu API:

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

przed moim: <div id="map"></div>

Używam .ASP NET (MVC)

Question 7

Dla mnie

Dodanie tej linii

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

Przed tą linią.

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

pracował

Question 8

Może nie mieć znaczenia dla wszystkich, ale ten mały szczegół powodował, że mój nie działał:

Zmień div z tego:

<div class="map">

Do tego:

<div id="map">

Question 9

Może używając

<body onload="initialize();">

zamiast

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

może Ci pomóc.

Answer 1

Mam stronę korzystającą z interfejsu API Map Google do wyświetlania mapy. Kiedy ładuję stronę bezpośrednio, pojawia się mapa. Jednak gdy próbuję załadować stronę za pomocą AJAX, pojawia się błąd:

Uncaught ReferenceError: google is not defined

Dlaczego to?

To jest strona z mapą:

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

A oto strona z wywołaniem 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>

Dzięki za pomoc.

Answer 2

Interfejs API nie może zostać załadowany po zakończeniu ładowania dokumentu domyślnie, musisz załadować go asynchronicznie.

zmodyfikuj stronę z 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>

Aby uzyskać więcej informacji, spójrz na: /programming/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

Przykład: http://jsfiddle.net/doktormolle/zJ5em/

Answer 3

Dzięki! Teraz ma to sens. Właśnie miałem uzupełnienie: moja mapa jest wyszarzona (choć z logo Google, linkiem i warunkami użytkowania). Widzę w Firebug, że kafelki się ładują. Czy wiesz, jaki może być tego powód?

bardziej ekologiczne

Answer 4

Zwykle jest to wynikiem brakującej / nieprawidłowej opcji mapy, takiej jak zoom, mapTypeId lub center (wszystkie z nich są wymagane, jeśli ich brakuje lub przypisano nieprawidłową wartość, nie ma wartości domyślnej dla nie można było renderować)

dr Molle

Answer 5

1

Problem polega na tym, że ukrywam div, w którym pojawia się mapa. Mam na to osobne pytanie: stackoverflow.com/questions/14263472/…

bardziej ekologiczny

Answer 6

38

Wiem, że ta odpowiedź nie jest bezpośrednio związana z problemem tego pytania, ale w niektórych przypadkach problem „Uncaught ReferenceError: google is not defined” wystąpi, jeśli plik js jest wywoływany przed używanym przez Ciebie interfejsem API Google Maps ... więc NIE ROBIĆ tego:

<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
źródło

moje pliki Google Maps API znajdują się powyżej mojego zdefiniowanego przez siebie js, ale nadal pojawia się ten błąd, ale nie przez cały czas. Czasami ładuje się dobrze. Muszę złapać ten błąd, ale nie mam pojęcia, jaka jest przyczyna.

JkAlombro

@JkAlombro odniesienie zaakceptowano odpowiedź w linku poniżej. Myślę, że obejmuje większość przypadków, w których powinieneś być szczególnie zaniepokojony kolejnością plików biblioteki JScript. Możesz również rozważyć użycie połączenia asynchronicznego, aby lepiej zarządzać tym, jak sugerowano w oryginalnej odpowiedzi dla tego wątku. stackoverflow.com/questions/4987977/…

Rex CoolCode Charles

Answer 7

moje pliki Google Maps API znajdują się powyżej mojego zdefiniowanego przez siebie js, ale nadal pojawia się ten błąd, ale nie przez cały czas. Czasami ładuje się dobrze. Muszę złapać ten błąd, ale nie mam pojęcia, jaka jest przyczyna.

JkAlombro

Answer 8

@JkAlombro odniesienie zaakceptowano odpowiedź w linku poniżej. Myślę, że obejmuje większość przypadków, w których powinieneś być szczególnie zaniepokojony kolejnością plików biblioteki JScript. Możesz również rozważyć użycie połączenia asynchronicznego, aby lepiej zarządzać tym, jak sugerowano w oryginalnej odpowiedzi dla tego wątku. stackoverflow.com/questions/4987977/…

Rex CoolCode Charles

Answer 9

Chyba inicjalizujesz coś przed funkcją inicjalizacji: var directionsService = new google.maps.DirectionsService();

Przenieś to do funkcji, aby nie próbowała go wykonywać przed załadowaniem strony.

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

Answer 10

5

Uncaught ReferenceError: Google is not specified. Błąd zniknie po usunięciu opóźnienia asynchronicznego z tagu map API script.

Sohan Jangid
źródło

Answer 11

Po wykonaniu wszystkich Twoich obejść zadziałało dla mnie wywołanie interfejsu API:

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

przed moim: <div id="map"></div>

Używam .ASP NET (MVC)

Answer 12

Dla mnie

Dodanie tej linii

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

Przed tą linią.

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

pracował

Answer 13

Może nie mieć znaczenia dla wszystkich, ale ten mały szczegół powodował, że mój nie działał:

Zmień div z tego:

<div class="map">

Do tego:

<div id="map">

Answer 14

-2

Może używając

<body onload="initialize();">

zamiast

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

może Ci pomóc.

rotring05
źródło

Interfejs API Map Google wyświetla komunikat „Uncaught ReferenceError: Google is not defined” tylko w przypadku korzystania z AJAX

Odpowiedzi: