У меня есть страница, которая использует 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>
Спасибо за вашу помощь.
ajax
google-maps-api-3
зеленее
источник
источник
Я знаю, что этот ответ не имеет прямого отношения к проблеме, связанной с этим вопросом, но в некоторых случаях возникает проблема «Uncaught ReferenceError: google is not defined», если ваш файл js вызывается до api карт Google, которые вы используете ... так что НЕ ДЕЛАЙТЕ этого:
<script type ="text/javascript" src ="SomeJScriptfile.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>источник
Предположительно, вы что-то инициализируете перед своей функцией инициализации:
var directionsService = new google.maps.DirectionsService();Переместите это в функцию, чтобы она не пыталась выполнить ее до загрузки страницы.
var directionsDisplay, directionsService; var map; function initialize() { directionsService = new google.maps.DirectionsService(); directionsDisplay = new google.maps.DirectionsRenderer();источник
Uncaught ReferenceError: ошибка Google не определена исчезнет при удалении асинхронной задержки из тега скрипта API карты.
источник
Что сработало для меня после того, как вы выполнили все ваши обходные пути, так это вызов 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)
источник
Для меня
Добавление этой строки
<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>работал
источник
Может быть, не для всех, но эта маленькая деталь заставляла мою не работать:
Измените div с этого:
<div class="map">К этому:
<div id="map">источник
Может быть, используя
<body onload="initialize();">вместо
$(function(){ initialize(); });могу помочь тебе.
источник