Library

Untuk memuat kode JavaScript untuk Maps JavaScript API, Anda harus menyertakan skrip loader bootstrap di halaman Anda, dalam bentuk berikut:

<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",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Maps JavaScript API terdiri dari library yang tidak dimuat hingga Anda memintanya secara khusus. Memecah komponen menjadi library memungkinkan API dimuat dan diuraikan dengan cepat, sehingga Anda hanya dikenai overhead tambahan saat memuat dan mengurai library saat Anda membutuhkannya. Saat menggunakan impor library dinamis, loader bootstrap inline tidak memuat library apa pun secara default (bahkan core atau maps); sebelum memanggil google.maps.importLibrary(), tidak ada bagian dari Maps JavaScript API yang dimuat.

Untuk memuat library saat runtime, gunakan operator await untuk memanggil google.maps.importLibrary() dari dalam fungsi async. Asumsikan bahwa hanya library yang diminta yang dimuat, dan panggil google.maps.importLibrary() untuk setiap library yang digunakan kode Anda. Contoh:

const { Map } = await google.maps.importLibrary("maps");

Contoh kode berikut menunjukkan pemuatan library maps dan marker untuk mengakses class Map dan AdvancedMarkerElement:

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

JavaScript

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

Pustaka yang Tersedia

Library berikut tersedia untuk digunakan dengan impor library dinamis dan tag pemuatan skrip langsung:

Permintaan bootstrap berikut mengilustrasikan cara menambahkan permintaan untuk library google.maps.geometry dari Maps JavaScript API, ke tag pemuatan skrip langsung:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry&callback=initMap">
</script>

Untuk meminta beberapa pustaka sekaligus, pisahkan dengan koma:

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