Migrasi: Modul Maps di google.load

Mulai 13 Oktober 2021, kami menonaktifkan layanan yang menyediakan modul "Maps" untuk google.load. Artinya, setelah 13 Oktober 2021, jika Anda mencoba menggunakan modul "Maps" di google.load, Anda akan menerima error (modul "maps" tidak didukung), dan peta tidak akan dimuat. Untuk membantu menghindari potensi kerusakan, Anda harus beralih ke salah satu alternatif.

Apa yang harus saya lakukan?

Pertama, hapus tag <script> yang memuat loader google.load, lalu hapus panggilan ke google.load. Jika Anda menggunakan Google Loader untuk hal lainnya, Anda dapat membiarkan tag <script> loader di tempatnya.

Selanjutnya, terapkan cara baru untuk memuat Maps JavaScript API (pilih salah satu opsi berikut):

Contoh saat ini menggunakan Google Loader

Contoh berikut menunjukkan cara Google Loader saat ini digunakan untuk memuat Maps JavaScript API (ada dua blok <script>):

Sebelum

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

Saat pendekatan ini digunakan, Maps JavaScript API akan dimuat pada saat yang sama dengan pemuatan halaman. Untuk menerapkan pemuatan inline, ganti terlebih dahulu tag <script> yang memuat www.google.com/jsapi ("sebelum") dengan tag <script> yang ditampilkan di contoh berikut:

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

Kemudian di kode JavaScript Anda, hapus panggilan fungsi google.load, karena tidak diperlukan lagi. Contoh berikut menunjukkan fungsi initMap() kosong, yang dipanggil saat library Maps berhasil dimuat:

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

Lihat dokumentasi

Pemuatan dinamis dari file JavaScript lain

Pemuatan dinamis memungkinkan Anda mengontrol waktu pemuatan Maps JavaScript API. Misalnya, Anda dapat menunggu untuk memuat Maps JavaScript API hingga pengguna mengklik tombol atau melakukan tindakan lain. Untuk menerapkan pemuatan dinamis, ganti tag <script> yang memuat www.google.com/jsapi ("sebelum") terlebih dahulu dengan kode untuk menambahkan <script> secara terprogram, seperti yang ditunjukkan pada contoh berikut:

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;

Kemudian, lampirkan fungsi callback ke objek jendela seperti ini:

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

Terakhir, tambahkan tag <script> ke header halaman seperti ini:

document.head.appendChild(script);

Lihat dokumentasi