BasicPlaceAutocompleteElement
membuat kolom input teks, memberikan prediksi tempat dalam daftar pilihan UI, dan menampilkan ID tempat untuk tempat yang dipilih.
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();
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)); }
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>