API của Google Maps chỉ thông báo “Uncaught ReferenceError: google is notined” khi sử dụng AJAX

Question 1

Tôi có một trang sử dụng API Google Maps để hiển thị bản đồ. Khi tôi tải trang trực tiếp, bản đồ sẽ xuất hiện. Tuy nhiên, khi tôi cố gắng tải trang bằng AJAX, tôi gặp lỗi:

Uncaught ReferenceError: google is not defined

Tại sao thế này?

Đây là trang có bản đồ:

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

Và đây là trang có lệnh gọi 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>

Cảm ơn bạn đã giúp đỡ.

Question 2

Không thể tải API sau khi tải xong tài liệu theo mặc định, bạn sẽ cần tải nó không đồng bộ.

sửa đổi trang với bản đồ:

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

Để biết thêm chi tiết, hãy xem tại: /programming/14184956/async-google-maps-api-v3-undefined-is-not-a- Chức năng/14185834#14185834

Ví dụ: http://jsfiddle.net/doktormolle/zJ5em/

Question 3

Tôi biết câu trả lời này không liên quan trực tiếp đến vấn đề của câu hỏi này nhưng trong một số trường hợp, vấn đề "Uncaught ReferenceError: google is notined" sẽ xảy ra nếu tệp js của bạn được gọi trước api google maps mà bạn đang sử dụng ... vì vậy ĐỪNG LÀM điều này:

<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

Theo dự đoán, bạn đang khởi tạo một cái gì đó trước khi hàm khởi tạo: var directionsService = new google.maps.DirectionsService();

Di chuyển nó vào hàm, vì vậy nó sẽ không thử và thực thi nó trước khi trang được tải.

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

Question 5

Uncaught ReferenceError: lỗi không xác định được google sẽ biến mất khi loại bỏ trì hoãn không đồng bộ khỏi thẻ tập lệnh API bản đồ.

Question 6

Điều hiệu quả với tôi sau khi làm theo tất cả các cách giải quyết của bạn là gọi API:

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

trước khi của tôi : <div id="map"></div>

Tôi đang sử dụng .ASP NET (MVC)

Question 7

Cho tôi

Thêm dòng này

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

Trước dòng này.

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

đã làm việc

Question 8

Có thể không phù hợp với tất cả mọi người nhưng chi tiết nhỏ này đã khiến tôi không hoạt động:

Thay đổi div từ cái này:

<div class="map">

Về điều này:

<div id="map">

Question 9

Có thể sử dụng

<body onload="initialize();">

thay vì

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

có thể giúp bạn.