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

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

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

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

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

• การโหลดในบรรทัดโดยใช้แท็ก <script>
• การโหลดแบบไดนามิกจากไฟล์ JavaScript อื่น

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

ตัวอย่างต่อไปนี้แสดงวิธีใช้ Google Loader ในปัจจุบันเพื่อโหลด 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>

การโหลดในบรรทัดโดยใช้แท็ก <script> (แนะนํา)

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

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

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

<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 ("ก่อน") ด้วยโค้ดเพื่อเพิ่มแท็ก <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 ดังนี้

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

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

document.head.appendChild(script);

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