Halaman ini diterjemahkan oleh Cloud Translation API.

Elemen Place Autocomplete Dasar

BasicPlaceAutocompleteElement membuat kolom input teks, memberikan prediksi tempat dalam daftar pilihan UI, dan menampilkan ID tempat untuk tempat yang dipilih.

Berbeda dengan PlaceAutocompleteElement, elemen Basic Place Autocomplete yang disederhanakan menghapus kolom input saat pengguna memilih prediksi tempat, dan juga menampilkan objek Place yang hanya berisi ID tempat, bukan objek PlacePrediction. Gunakan ID Tempat ini dengan elemen Detail Kit UI Places untuk mendapatkan detail tempat tambahan.

Prasyarat

Untuk menggunakan elemen Pelengkapan Otomatis Tempat Dasar, Anda harus mengaktifkan "Places UI Kit" di project Google Cloud Anda. Lihat bagian Memulai untuk mengetahui detailnya

Menambahkan elemen Place Autocomplete Dasar

Elemen Place Autocomplete Dasar membuat kolom input teks, memberikan prediksi tempat dalam daftar pilihan UI, dan menampilkan ID tempat sebagai respons terhadap pilihan pengguna menggunakan peristiwa gmp-select. Bagian ini menunjukkan cara menambahkan elemen Autocomplete Dasar ke peta atau halaman web.

Menambahkan elemen Autocomplete Dasar ke halaman web

Untuk menambahkan elemen BasicAutocomplete ke halaman web, buat google.maps.places.BasicPlaceAutocompleteElement baru, lalu tambahkan kode ini ke halaman seperti yang ditampilkan dalam contoh berikut:

  // Request needed libraries.
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary('places');
// Create the input HTML element, and append it.
const placeAutocomplete = new BasicPlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);

Menambahkan elemen Autocomplete Dasar ke peta

Untuk menambahkan elemen Autocomplete Dasar ke peta, buat instance BasicPlaceAutocompleteElement baru, tambahkan ke div, lalu dorong kode ini ke peta sebagai kontrol kustom, seperti yang ditampilkan dalam contoh berikut:

  const placeAutocomplete = new google.maps.places.BasicPlaceAutocompleteElement();
  placeAutocomplete.id = 'place-autocomplete-input';
  placeAutocomplete.locationBias = center;
  const card = document.getElementById('place-autocomplete-card');
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

Membatasi prediksi Autocomplete

Secara default, Basic Place Autocomplete menampilkan semua jenis tempat, dengan bias prediksi di dekat lokasi pengguna. Tetapkan BasicPlaceAutocompleteElementOptions untuk memberikan prediksi yang lebih relevan, dengan membatasi atau membiaskan hasil.

Membatasi hasil akan menyebabkan elemen Autocomplete Dasar mengabaikan hasil apa pun yang berada di luar area pembatasan. Praktik yang umum adalah membatasi hasil ke batas peta. Membiaskan hasil akan membuat elemen BasicAutocomplete menampilkan hasil dalam area yang ditentukan, tetapi beberapa hasil yang cocok mungkin berada di luar area tersebut.

Jika Anda tidak memberikan batas atau area pandang peta, API akan berupaya mendeteksi lokasi pengguna dari alamat IP mereka, dan akan menampilkan hasil berdasarkan lokasi tersebut. Tetapkan batas jika memungkinkan. Jika tidak, pengguna lain mungkin akan menerima prediksi yang berbeda. Selain itu, guna meningkatkan ketepatan prediksi secara umum, penting untuk menyediakan area pandang yang logis, seperti yang Anda tetapkan dengan menggeser atau melakukan zoom pada peta, atau area pandang yang ditetapkan developer berdasarkan lokasi dan radius perangkat. Jika radius tidak tersedia, 5 km akan dianggap sebagai nilai default yang wajar untuk elemen Place Autocomplete Dasar. Jangan menetapkan area pandang dengan radius nol (satu titik), area pandang yang lebarnya hanya beberapa meter (kurang dari 100 m), atau area pandang yang membentang di globe.

Membatasi penelusuran tempat menurut negara

Untuk membatasi penelusuran tempat ke satu atau beberapa negara tertentu, gunakan properti includedRegionCodes untuk menentukan kode negara seperti yang ditampilkan dalam cuplikan berikut:

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

Membatasi penelusuran tempat ke batas peta

Untuk membatasi penelusuran tempat ke batas peta, gunakan properti locationRestrictions untuk menambahkan batas, seperti yang ditampilkan dalam cuplikan berikut:

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

Saat membatasi ke batas peta, pastikan untuk menambahkan pemroses guna memperbarui batas saat batas tersebut berubah:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

Untuk menghapus locationRestriction, tetapkan parameter ini ke null.

Membiaskan hasil penelusuran tempat

Biaskan hasil penelusuran tempat ke area lingkaran dengan menggunakan properti locationBias, dan meneruskan radius, seperti yang ditampilkan di sini:

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

Untuk menghapus locationBias, tetapkan parameter ini ke null.

Membatasi hasil penelusuran tempat ke jenis tertentu

Batasi hasil penelusuran tempat ke jenis tempat tertentu dengan menggunakan properti includedPrimaryTypes, dan menentukan satu atau beberapa jenis, seperti yang ditampilkan di sini:

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

Untuk mengetahui daftar lengkap jenis yang didukung, lihat Tabel jenis tempat A dan B.

Mendapatkan detail tempat

Guna mendapatkan ID tempat untuk tempat yang dipilih, tambahkan pemroses gmp-select ke PlaceAutocompleteElement, seperti yang ditampilkan dalam contoh berikut:

// Add the gmp-select listener, and display the results.
  placeAutocomplete.addEventListener('gmp-select', async ({ place }) => {
      await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
      selectedPlaceTitle.textContent = 'Selected Place:';
      selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
  });

Dalam contoh sebelumnya, pemroses peristiwa menampilkan objek class Place. Panggil place.fetchFields() untuk mendapatkan kolom data Place Details yang diperlukan untuk aplikasi Anda.

Pemroses dalam contoh berikutnya meminta informasi tempat dan menampilkannya di peta.

  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener('gmp-select', async ({ place }) => {
      await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
      // If the place has a geometry, then present it on a map.
      if (place.viewport) {
          map.fitBounds(place.viewport);
      }
      else {
          map.setCenter(place.location);
          map.setZoom(17);
      }
      let content = '<div id="infowindow-content">' +
          '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
          '<span id="place-address">' + place.formattedAddress + '</span>' +
          '</div>';
      updateInfoWindow(content, place.location);
      marker.position = place.location;
  });

Contoh ini menunjukkan cara menambahkan elemen Autocomplete Dasar ke peta Google.

JavaScript

const mapContainer = document.getElementById("map-container");
const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const detailsElement = document.querySelector('gmp-place-details-compact');
const mapElement = document.querySelector('gmp-map');
const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    //@ts-ignore
    const { BasicPlaceAutocompleteElement, PlaceDetailsElement } = await google.maps.importLibrary('places');
    //@ts-ignore
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
    //@ts-ignore
    const { LatLngBounds } = await google.maps.importLibrary('core');
    // Set the initial map location and autocomplete location bias
    mapElement.center = center;
    autocompleteElement.locationBias = center;
    // Get the underlying google.maps.Map object to add listeners
    const map = mapElement.innerMap;
    // Add the listener tochange locationBias to locationRestriction when the map moves
    map.addListener('bounds_changed', () => {
        autocompleteElement.locationBias = null;
        autocompleteElement.locationRestriction = map.getBounds();
        console.log("bias changed to restriction");
    });
    // Add the listener to update the Place Request element when the user selects a prediction
    autocompleteElement.addEventListener('gmp-select', async (event) => {
        const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Add the listener to update the marker when the Details element loads
    detailsElement.addEventListener('gmp-load', async () => {
        const location = detailsElement.place.location;
        detailsElement.style.display = "block";
        advancedMarkerElement.position = location;
        advancedMarkerElement.content = detailsElement;
        if (detailsElement.place.viewport) {
            map.fitBounds(detailsElement.place.viewport);
        }
        else {
            map.setCenter(location);
            map.setZoom(17);
        }
    });
}
initMap();index.js

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 50px;
  top: 10px;
  left: 10px;
  z-index: 1;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
  border-radius: 10px;
}

gmp-place-details-compact {
  width: 360px;
  max-height: 300px;
  border: none;
  padding: 0;
  margin: 0;
  position: absolute;
  transform: translate(calc(-180px), calc(-215px)); 
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}style.css

HTML

<html>
  <head>
    <title>Place Autocomplete map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
   <div id="map-container">
      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
      <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
      </gmp-place-details-compact>
      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
         <gmp-advanced-marker></gmp-advanced-marker> 
      </gmp-map>
    </div>

    <!-- prettier-ignore -->
    <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>index.html

Mencoba Contoh

JSFiddle.net