Elemen Place Autocomplete Dasar

Pilih platform: Android iOS JavaScript

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

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

• Elemen Basic Place Autocomplete menampilkan objek Place yang hanya berisi ID tempat, bukan PlacePrediction objek. Anda dapat menggunakan ID tempat yang ditampilkan langsung dengan elemen Places UI Kit Details untuk mendapatkan detail tempat tambahan, sedangkan objek PlacePrediction harus dikonversi terlebih dahulu ke ID tempat.
• Elemen Basic Place Autocomplete tidak mengharuskan Anda mengaktifkan Places API di Konsol Google Cloud.
• Elemen Basic Place Autocomplete menghapus kolom input saat pengguna memilih prediksi tempat.

Prasyarat

Untuk menggunakan elemen Basic Place Autocomplete, Anda harus mengaktifkan Places UI Kit di project Google Cloud. Lihat bagian Memulai untuk mengetahui detailnya.

Catatan: Elemen Basic Place Autocomplete ditagih menggunakan SKU: Places UI Kit - Autocomplete per Session, bukan permintaan Autocomplete standar atau SKU sesi Autocomplete.

Menambahkan elemen Basic Place Autocomplete

Bagian ini menampilkan cara menambahkan elemen Basic Autocomplete ke halaman web atau peta.

Menambahkan elemen Basic Autocomplete ke halaman web

Untuk menambahkan elemen BasicAutocomplete ke halaman web, buat baru google.maps.places.BasicPlaceAutocompleteElement, lalu tambahkan 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 Basic Autocomplete ke peta

Untuk menambahkan elemen Basic Autocomplete ke peta, tambahkan BasicPlaceAutocompleteElement ke elemen gmp-map dan tetapkan posisinya menggunakan atribut slot, seperti yang ditampilkan 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

Catatan:Atribut ID peta memungkinkan gaya peta dan setelan konfigurasi disimpan di Google Cloud, dan diperlukan untuk contoh ini. ID DEMO_MAP_ID dapat digunakan untuk pengujian dan tidak perlu diaktifkan di Cloud.

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 Basic Autocomplete 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 yang berbeda mungkin 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 Basic Place Autocomplete. 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 menggunakan properti includedPrimaryTypes, dan tentukan 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 Place Request

Tambahkan pemroses untuk memperbarui elemen Place Request 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 menampilkan cara menambahkan elemen Basic Autocomplete 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 init() {
    // Asynchronously load required libraries from the Google Maps JS API.
    const [{ AdvancedMarkerElement }, { InfoWindow, Circle }, { Size }] =
        await Promise.all([
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('core'),
            google.maps.importLibrary('places'),
        ]);

    // 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,
        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 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;
        if (!location) {
            advancedMarkerElement.position = null;
            return;
        }

        // 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 Circle({
            center: newCenter,
            radius: 10000, // 10km in meters.
        });
    });
}

void init();
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>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </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