API Google Maps выбрасывает "Uncaught ReferenceError: google не определен" только при использовании AJAX

У меня есть страница, которая использует API Карт Google для отображения карты. Когда я загружаю страницу напрямую, отображается карта. Однако, когда я пытаюсь загрузить страницу с помощью 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>

Спасибо за вашу помощь.

Ответы

Ответ 1

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>

Для более подробной информации смотрите: /questions/110360/async-google-maps-api-v3-undefined-is-not-a-function/688573#688573

Пример: http://jsfiddle.net/doktormolle/zJ5em/

Ответ 2

Я знаю, что этот ответ напрямую не связан с проблемой этих вопросов, но в некоторых случаях проблема "Неотдача ReferenceError: google не определена" будет возникать, если ваш js файл вызывается до того, как вы используете Google Maps api, который вы используете... поэтому НЕ ДЕЛАЙТЕ:

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

Ответ 3

В предположении, что вы инициализируете что-то перед своей инициализацией: var directionsService = new google.maps.DirectionsService();

Переместите это в функцию, поэтому он не будет пытаться выполнить его до загрузки страницы.

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

Ответ 4

Не может быть актуальным для всех, но эта небольшая деталь заставляет меня не работать:

Измените div:

<div class="map">

К этому:

<div id="map">

Ответ 5

Uncaught ReferenceError: Google не определена. Ошибка исчезнет, если удалить асинхронную задержку из тега сценария API карты.

Ответ 6

После всех ваших обходных путей для меня сработало обращение к 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)

Ответ 7

Для меня

Добавление этой строки

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

работал

Ответ 8

Возможно использование

<body onload="initialize();">

вместо

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

может помочь вам.