การย้ายข้อมูล: โมดูล Maps ใน google.load

ในวันที่ 13 ตุลาคม 2021 เราจะปิดบริการ "Maps" สำหรับ google.load ซึ่งหมายความว่าหลังจากวันที่ 13 ตุลาคม 2021 หากคุณพยายามใช้ "Maps" โมดูลใน google.load คุณจะได้รับข้อผิดพลาด (ไม่ร��งรับโมดูล "แผนที่") และ ไม่มีแผนที่จะโหลด คุณต้องเปลี่ยนไปใช้ 1 เพื่อหลีกเลี่ยงการหยุดทำงานที่อาจเกิดขึ้น ทางเลือกอื่นๆ

สิ่งที่ต้องทำ

ก่อนอื่น ให้นำแท็ก <script> ที่โหลดตัวโหลด google.load ออก จากนั้นนำสายที่โทรหา google.load ออก หากคุณใช้ Google Loader สำหรับ คุณวางแท็ก <script> ของตัวโหลดไว้ที่เดิมได้

ต่อไป ให้ใช้วิธีใหม่ในการโหลด Maps JavaScript API (เลือก ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้)

ตัวอย่างปัจจุบันที่ใช้ Google Loader

ตัวอย่างต่อไปนี้แสดงวิธีการใช้เครื่องมือโหลดของ Google ในปัจจุบันเพื่อโหลด Maps JavaScript API (มี <script> บล็อก 2 บล็อก ได้แก่

ก่อน

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
    "callback": initMap,
    "key": "YOUR_KEY",
    "libraries": "places,visualization"
});
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

เมื่อใช้วิธีการนี้ Maps JavaScript API จะโหลดที่ ขณะที่โหลดหน้าเว็บ หากต้องการใช้การโหลดแบบอินไลน์ ก่อนอื่นให้แทนที่ <script> ที่โหลด www.google.com/jsapi ("before") พร้อมด้วยพารามิเตอร์ แท็ก <script> ที่แสดงในตัวอย่างต่อไปนี้

<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>

จากนั้นในโค้ด JavaScript ให้นำการเรียกฟังก์ชัน google.load ออก เนื่องจาก ก็ไม่จำเป็นอีกต่อไป ตัวอย่างต่อไปนี้แสดง initMap() ที่ว่างเปล่า ซึ่งจะถูกเรียกเมื่อไลบรารีแผนที่โหลดสำเร็จแล้ว

<script type='text/javascript'>
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

ดูเอกสารประกอบ

การโหลดแบบไดนามิกจากไฟล์ JavaScript อื่น

การโหลดแบบไดนามิกช่วยให้คุณควบคุมเวลาที่จะโหลด Maps JavaScript API สำหรับ ตัวอย่างเช่น คุณสามารถรอโหลด Maps JavaScript API ได้จนกว่า ผู้ใช้คลิกปุ่มหรือดำเนินการอย่างอื่น หากต้องการใช้การโหลดแบบไดนามิก ก่อนอื่นให้แทนที่แท็ก <script> ที่โหลด www.google.com/jsapi ("before") ด้วยโค้ดเพื่อเพิ่มแท็ก <script> แบบเป็นโปรแกรม ดังที่แสดงในตัวอย่างต่อไปนี้

var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;

จากนั้นแนบฟังก์ชัน Callback กับออบเจ็กต์หน้าต่างดังนี้

window.initMap = function() {
  // Google Maps JS API is loaded and available
};

สุดท้าย ให้เพิ่มแท็ก <script> ในส่วนหัวของหน้าดังนี้

document.head.appendChild(script);

ดูเอกสารประกอบ