Dynamic Library Import API

Dynamic Library Import API adalah cara baru untuk memuat Maps JavaScript API, dan semua library yang menyertainya. Kemampuannya untuk memuat library secara dinamis saat runtime membuat Anda tidak perlu mengkhawatirkan dependensi lintas komponen, dan memungkinkan pemuatan berbasis promise untuk library. Dengan API ini, Anda juga tidak memerlukan namespace yang panjang saat menggunakan Maps JavaScript API (namespace panjang tetap akan diisi dan dapat digunakan).

Menggunakan Dynamic Library Import

Agar dapat menggunakan Dynamic Library Import API, tambahkan tag skrip untuk loader bootstrap inline ke halaman HTML Anda, dan kode runtime untuk memanggil importLibrary() (Anda juga dapat menggunakan loader skrip sederhana untuk melakukannya, tetapi kode aplikasi Anda harus menunggu callback sebelum menggunakan importLibrary). Salin kode berikut, dengan menambahkan kunci API Anda, dan semua parameter bootstrap yang diperlukan aplikasi Anda:

<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
  key: "YOUR_API_KEY_HERE",
  v: "beta",
  // Add other bootstrap parameters as needed, using camel case.
});
</script>

Untuk memuat library saat runtime, gunakan operator await untuk memanggil importLibrary() dari dalam fungsi asinkron, seperti yang ditampilkan di sini:

let map;

async function initMap() {
    // Create the map.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"),{
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: 'DEMO_MAP_ID',
    });

    // Add an info window.
    const infoWindow = new InfoWindow({
        ariaLabel: "Googleplex",
    });

    // Add a marker.
    const {AdvancedMarkerView} = await google.maps.importLibrary("marker");
    const markerView = new AdvancedMarkerView({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: 'Googleplex, Mountain View CA'
    });

    markerView.addListener('click', () => {
        infoWindow.close();
        infoWindow.setContent('<b>Googleplex</b>, Mountain View CA');
        infoWindow.open(markerView.map, markerView);
    });
}

initMap();

Parameter wajib

  • key: Kunci API Anda. Maps JavaScript API tidak akan dimuat kecuali jika kunci API yang valid ditentukan.

  • v: "beta" Untuk pratinjau, Anda harus menentukan saluran beta.

Parameter opsional

  • libraries: Daftar yang dipisahkan koma untuk library Maps JavaScript API tambahan yang akan dimuat. Menentukan serangkaian library yang tetap umumnya tidak direkomendasikan, tetapi tersedia bagi developer yang ingin secara mendetail menyesuaikan perilaku caching di situs mereka. Perhatikan bahwa menentukan serangkaian library yang tetap dapat memperlambat pemuatan jika sebuah library yang diperlukan tidak ditentukan.

  • language: Bahasa yang akan digunakan. Parameter ini memengaruhi nama kontrol, pemberitahuan hak cipta, rute mobil, dan label kontrol, serta respons atas permintaan layanan. Lihat daftar bahasa yang didukung.

  • region: Kode wilayah yang akan digunakan. Parameter ini akan mengubah perilaku peta berdasarkan negara atau wilayah yang tertentu.

  • solutionChannel: Google Maps Platform menyediakan banyak jenis kode contoh untuk membantu Anda memulai dan menjalankan dengan cepat. Untuk melacak penerapan contoh kode yang lebih kompleks dan meningkatkan kualitas solusi, Google menyertakan parameter kueri solution_channel pada panggilan API dalam kode contoh kami.

  • authReferrerPolicy: Pelanggan Maps JS dapat mengonfigurasi Pembatasan Perujuk HTTP di Cloud Console untuk membatasi URL mana yang diizinkan untuk menggunakan Kunci API tertentu. Secara default, pembatasan ini dapat dikonfigurasi untuk mengizinkan hanya jalur tertentu yang menggunakan sebuah Kunci API. Jika URL di domain atau origin yang sama dapat menggunakan Kunci API tersebut, Anda dapat menetapkan authReferrerPolicy: "origin" untuk membatasi jumlah data yang dikirim saat mengizinkan permintaan dari Maps JavaScript API. Jika parameter ini ditentukan dan Pembatasan Perujuk HTTP diaktifkan di Cloud Console, Maps JavaScript API hanya dapat dimuat jika ada Pembatasan Perujuk HTTP yang cocok dengan domain situs saat ini tanpa jalur yang ditentukan.