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. Anda hanya dikenai overhead tambahan saat memuat dan mengurai library saat Anda membutuhkannya.

Muat library tambahan saat runtime, dengan menggunakan operator await untuk memanggil importLibrary() dari dalam fungsi async. Contoh:

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

Contoh kode berikut menunjukkan pemuatan library Map dan AdvancedMarkerElement:

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

Library untuk Dynamic Library Import

Library berikut tersedia untuk digunakan dengan Dynamic Library Import:

Library untuk URL bootstrap (lama)

Library berikut didukung untuk digunakan dengan tag skrip bootstrap lama:
  • drawing menyediakan antarmuka grafis bagi pengguna untuk menggambar poligon, persegi panjang, polyline, lingkaran, dan penanda pada peta. Lihat Dokumentasi library Gambar untuk informasi selengkapnya.
  • geometry menyertakan fungsi utilitas untuk menghitung nilai geometri skalar (seperti jarak dan luas) pada permukaan bumi. Lihat Dokumentasi library Geometri untuk informasi selengkapnya.
  • journeySharing memberikan dukungan untuk solusi Transportasi dan Logistik Google Maps Platform.
  • localContext menampilkan tempat-tempat menarik utama kepada pengguna di dekat lokasi yang Anda tentukan. Lihat Dokumentasi library Konteks Lokal untuk informasi selengkapnya.
  • marker memungkinkan Anda menambahkan Advanced Markers yang berperforma tinggi dan dapat disesuaikan ke peta. Lihat dokumentasi Advanced Markers untuk informasi selengkapnya.
  • places memungkinkan aplikasi Anda menelusuri tempat-tempat seperti tempat usaha, lokasi geografis, atau lokasi menarik terkenal, dalam area yang ditentukan. Lihat Dokumentasi library Tempat untuk informasi selengkapnya.
  • visualization menyediakan peta panas untuk representasi visual data. Lihat Dokumentasi library Visualization untuk informasi selengkapnya.

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

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

Untuk meminta beberapa library 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>