ในวันที่ 13 ตุลาคม 2021 เราจะปิดบริการที่ให้โมดูล "Maps"
สำหรับ google.load
ซึ่งหมายความว่าหลังจากวันที่ 13 ตุลาคม 2021 หากคุณพยายามใช้โมดูล "Maps" ใน
google.load
คุณจะได้รับข้อผิดพลาด (ระบบไม่รองรับโมดูล "maps") และ
จะไม่มีการโหลดแผนที่ คุณต้องเปลี่ยนไปใช้ตัวเลือกอื่นเพื่อหลีกเลี่ยงปัญหาที่อาจเกิดขึ้น
สิ่งที่ต้องทำ
ก่อนอื่น ให้นำแท็ก <script>
ที่โหลดโปรแกรมโหลด google.load
ออก
จากนั้นนำการเรียกใช้ google.load
ออก หากคุณใช้ Google Loader สำหรับสิ่งอื่นๆ
ก็ไม่เป็นไรที่จะปล่อยให้แท็ก <script>
โหลดเดอร์อยู่ในที่เดิม
จากนั้นใช้รูปแบบใหม่ในการโหลด Maps JavaScript API (เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้)
ตัวอย่างปัจจุบันที่ใช้ 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>
จากนั้นในโค้ด JavaScript ให้นำการเรียกใช้ฟังก์ชัน google.load
ออก เนื่องจาก
ไม่จำเป็นต้องใช้แล้ว ตัวอย่างต่อไปนี้แสดง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;
จากนั้นแนบฟังก์ชันเรียกกลับกับออบเจ็กต์หน้าต่างดังนี้
window.initMap = function() {
// Google Maps JS API is loaded and available
};
สุดท้าย ให้เพิ่มแท็ก <script>
ลงในส่วนหัวของหน้าเว็บ ดังนี้
document.head.appendChild(script);