Mulai

Developer Wilayah Ekonomi Eropa (EEA)

Halaman ini menunjukkan cara mendapatkan kunci API, mengaktifkan API yang diperlukan, dan memuat Places Library, sehingga Anda dapat menggunakan class Place.

Mendapatkan kunci API dan mengaktifkan API yang diperlukan

Sebelum menggunakan class Place, Anda perlu:

  • Membuat project Cloud dengan akun penagihan.
  • Mendapatkan kunci API.
  • Mengaktifkan API berikut:
    • Maps JavaScript API
    • Places API
    • Places API (Baru) (diperlukan agar dapat menggunakan Text Search (Baru) dan Place Autocomplete)

Untuk mempelajari lebih lanjut, lihat Menyiapkan project Google Cloud.

Mendapatkan kunci API

Mengaktifkan Places API (Baru)

Memuat Places Library

Untuk memuat Places Library, pertama-tama muat Maps JavaScript API, dengan menambahkan loader bootstrap inline ke kode aplikasi Anda, seperti yang ditampilkan dalam cuplikan 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>

Selanjutnya, gunakan operator await untuk memanggil importLibrary() dari dalam fungsi async, seperti yang ditampilkan di sini:

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

Fungsi Anda juga dapat memuat library tanpa mendeklarasikan variabel untuk class yang diperlukan:

  async function initMap() {
    google.maps.importLibrary("places");
    ...
  }

  initMap();

Atau, Anda dapat memuat library langsung di HTML seperti yang ditunjukkan di sini:

  <script>
  google.maps.importLibrary("places");
  </script>

Untuk informasi selengkapnya tentang cara memuat library, lihat Memuat Maps JavaScript API.

Langkah berikutnya