Mulai Menggunakan Places UI Kit

Halaman ini menunjukkan cara mendapatkan kunci API, mengaktifkan Places UI Kit, dan memuat library yang mendukungnya.

Mendapatkan kunci API dan mengaktifkan Places UI Kit

Sebelum menggunakan Places UI Kit, Anda harus:

  • Membuat project Cloud dengan akun penagihan.
  • Aktifkan Places UI Kit.
  • Dapatkan kunci API.

Untuk mempelajari lebih lanjut, lihat Menyiapkan project Google Cloud.

Mengaktifkan Places UI Kit

Mendapatkan kunci API

Memuat library yang diperlukan

Untuk memuat library yang mendukung Places UI Kit, pertama-tama muat Maps JavaScript API dengan menambahkan loader bootstrap inline ke kode aplikasi Anda, seperti yang ditunjukkan 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, sebagai berikut:

  // Import the Places Library for PlaceDetailsElement and PlaceSearchElement
  const {PlaceDetailsElement, PlaceSearchElement} = await google.maps.importLibrary('places');

  // Import the Elevation Library for ElevationElement
  const {ElevationElement} = await google.maps.importLibrary('elevation');

Pelajari lebih lanjut cara memuat Maps JavaScript API.

Langkah berikutnya