Google Maps API จะแสดง“ Uncaught ReferenceError: google ไม่ได้กำหนด” เฉพาะเมื่อใช้ AJAX

Question 1

ฉันมีหน้าที่ใช้ Google Maps API เพื่อแสดงแผนที่ เมื่อฉันโหลดหน้าโดยตรงแผนที่จะปรากฏขึ้น อย่างไรก็ตามเมื่อฉันพยายามโหลดหน้าโดยใช้ 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>

ขอบคุณสำหรับความช่วยเหลือของคุณ.

Question 2

ไม่สามารถโหลด 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>

ดูรายละเอียดเพิ่มเติมได้ที่/programming/14184956/async-google-maps-api-v3-undefined-is-not-a-function/14185834#14185834

ตัวอย่าง: http://jsfiddle.net/doktormolle/zJ5em/

Question 3

ฉันรู้ว่าคำตอบนี้ไม่เกี่ยวข้องโดยตรงกับปัญหาของคำถามนี้ แต่ในบางกรณีปัญหา "Uncaught 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>

Question 4

เดาได้ว่าคุณกำลังเริ่มต้นบางอย่างก่อนที่ฟังก์ชันเริ่มต้นของคุณ: var directionsService = new google.maps.DirectionsService();

ย้ายสิ่งนั้นไปไว้ในฟังก์ชั่นดังนั้นจะไม่พยายามดำเนินการก่อนที่หน้าจะโหลด

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

Question 5

Uncaught ReferenceError: ข้อผิดพลาดที่ไม่ได้กำหนดของ google จะหายไปเมื่อนำasync defer ออกจากแท็กสคริปต์ API ของแผนที่

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

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

ทำงาน

Question 8

อาจไม่เกี่ยวข้องกับทุกคน แต่รายละเอียดเล็กน้อยนี้ทำให้ฉันไม่ทำงาน:

เปลี่ยน div จากสิ่งนี้:

<div class="map">

สำหรับสิ่งนี้:

<div id="map">

Question 9

อาจจะใช้

<body onload="initialize();">

แทน

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

สามารถช่วยคุณได้.