Elemen Place Autocomplete Dasar

Pilih platform: Android iOS JavaScript

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

Elemen Place Autocomplete Dasar lebih mudah diterapkan daripada PlaceAutocompleteElement, dan berbeda dalam hal berikut:

  • Elemen Place Autocomplete Dasar menampilkan objek Place yang hanya berisi ID tempat, bukan objek PlacePrediction. Anda dapat menggunakan ID tempat yang ditampilkan secara langsung dengan elemen Detail Kit UI Places untuk mendapatkan detail tempat tambahan, sedangkan objek PlacePrediction harus dikonversi terlebih dahulu menjadi ID tempat.
  • Elemen Place Autocomplete Dasar tidak mengharuskan Anda memuat Places API.
  • Elemen Place Autocomplete Dasar mengosongkan kolom input saat pengguna memilih prediksi tempat.

Prasyarat

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

Menambahkan elemen Place Autocomplete Dasar

Bagian ini menunjukkan cara menambahkan elemen Autocomplete Dasar ke halaman web atau peta.

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, tambahkan BasicPlaceAutocompleteElement ke elemen gmp-map dan tetapkan posisinya menggunakan atribut slot, seperti yang ditunjukkan dalam contoh berikut:

<gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
  <gmp-basic-place-autocomplete
    slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
</gmp-map>
index.html

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.

Mengonfigurasi elemen Permintaan Tempat

Tambahkan pemroses untuk memperbarui elemen Permintaan Tempat saat pengguna memilih prediksi: 

// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select', (event) => {
    // Reset marker and InfoWindow, and prepare the details element.
    placeDetailsParent.appendChild(placeDetailsElement);
    placeDetailsElement.style.display = 'block';
    advancedMarkerElement.position = null;
    infoWindow.close();
    // Request details for the selected place.
    const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
    placeDetailsRequest.place = event.place.id;
});
index.js

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

JavaScript

const placeAutocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const placeDetailsElement = document.querySelector('gmp-place-details-compact');
const placeDetailsParent = placeDetailsElement.parentElement;
const gmpMapElement = document.querySelector('gmp-map');
async function initMap() {
    // Asynchronously load required libraries from the Google Maps JS API.
    await google.maps.importLibrary('places');
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const { InfoWindow } = (await google.maps.importLibrary('maps'));
    // Get the initial center directly from the gmp-map element's property.
    const center = gmpMapElement.center;
    // Set the initial location bias for the autocomplete element.
    placeAutocompleteElement.locationBias = center;
    // Update the map object with specified options.
    const map = gmpMapElement.innerMap;
    map.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });
    // Create an advanced marker to show the location of a selected place.
    const advancedMarkerElement = new AdvancedMarkerElement({
        map: map,
        collisionBehavior: google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
    });
    // Create an InfoWindow to hold the place details component.
    const infoWindow = new InfoWindow({
        minWidth: 360,
        disableAutoPan: true,
        headerDisabled: true,
        pixelOffset: new google.maps.Size(0, -10),
    });
    // Event listener for when a place is selected from the autocomplete list.
    placeAutocompleteElement.addEventListener('gmp-select', (event) => {
        // Reset marker and InfoWindow, and prepare the details element.
        placeDetailsParent.appendChild(placeDetailsElement);
        placeDetailsElement.style.display = 'block';
        advancedMarkerElement.position = null;
        infoWindow.close();
        // Request details for the selected place.
        const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Event listener for when the place details have finished loading.
    placeDetailsElement.addEventListener('gmp-load', () => {
        const location = placeDetailsElement.place.location;
        // Position the marker and open the InfoWindow at the place's location.
        advancedMarkerElement.position = location;
        infoWindow.setContent(placeDetailsElement);
        infoWindow.open({
            map,
            anchor: advancedMarkerElement,
        });
        map.setCenter(location);
    });
    // Event listener to close the InfoWindow when the map is clicked.
    map.addListener('click', () => {
        infoWindow.close();
        advancedMarkerElement.position = null;
    });
    // Event listener for when the map finishes moving (panning or zooming).
    map.addListener('idle', () => {
        const newCenter = map.getCenter();
        // Update the autocomplete's location bias to a 10km radius around the new map center.
        placeAutocompleteElement.locationBias = new google.maps.Circle({
            center: {
                lat: newCenter.lat(),
                lng: newCenter.lng(),
            },
            radius: 10000, // 10km in meters.
        });
    });
}
initMap();
index.js

CSS

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

gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 30px;
  width: 500px;
  top: 10px;
  left: 10px;
  box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
  color-scheme: light;
  border-radius: 10px;
}
style.css

HTML

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

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- 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>
  </head>
  <body>
    <gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
      <gmp-basic-place-autocomplete
        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
    </gmp-map>
    <!-- Use inline styles to configure the Place Details Compact element because
     it will be placed within the info window, and info window content is inside 
     the shadow DOM when using <gmp-map> -->
    <gmp-place-details-compact
      orientation="horizontal"
      style="width: 400px;
      display: none;
      border: none;
      padding: 0;
      margin: 0;
      background-color: transparent;
      color-scheme: light;">
      <gmp-place-details-place-request></gmp-place-details-place-request>
      <gmp-place-standard-content></gmp-place-standard-content>
    </gmp-place-details-compact>
  </body>
</html>
index.html

Mencoba Contoh