Places Widgets

PlaceAutocompleteElement class

Class google.maps.places.PlaceAutocompleteElement

PlaceAutocompleteElement adalah subclass HTMLElement yang menyediakan komponen UI untuk Places Autocomplete API.

Elemen kustom:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng|lat,lng,altitude" requested-language="string" requested-region="string" unit-system="metric|imperial" types="type1 type2 type3..."></gmp-place-autocomplete>

Class ini memperluas HTMLElement.

Class ini mengimplementasikan PlaceAutocompleteElementOptions.

Akses dengan memanggil const {PlaceAutocompleteElement} = await google.maps.importLibrary("places").
Lihat Library di Maps JavaScript API.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
Parameter: 
AlphaincludedPrimaryTypes
Jenis:  Array<string> optional
Mencakup Jenis tempat utama (misalnya, "restaurant" atau "gas_station").

Tempat hanya ditampilkan jika jenis utamanya disertakan dalam daftar ini. Maksimal 5 nilai dapat ditentukan. Jika tidak ada jenis yang ditentukan, semua jenis Tempat akan ditampilkan.
Atribut HTML:
  • <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
AlphaincludedRegionCodes
Jenis:  Array<string> optional
Hanya menyertakan hasil di wilayah yang ditentukan, yang ditentukan sebagai hingga 15 kode wilayah dua karakter CLDR. Set kosong tidak akan membatasi hasil. Jika locationRestriction dan includedRegionCodes ditetapkan, hasilnya akan berada di area persimpangan.
Atribut HTML:
  • <gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>
locationBias
Jenis:  LocationBias optional
Petunjuk atau batas lunak yang digunakan saat menelusuri tempat.
locationRestriction
Jenis:  LocationRestriction optional
Batas untuk membatasi hasil penelusuran.
name
Jenis:  string optional
Nama yang akan digunakan untuk elemen input. Lihat https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name untuk mengetahui detailnya. Mengikuti perilaku yang sama dengan atribut nama untuk input. Perhatikan bahwa ini adalah nama yang akan digunakan saat formulir dikirimkan. Lihat https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form untuk mengetahui detailnya.
Atribut HTML:
  • <gmp-place-autocomplete name="string"></gmp-place-autocomplete>
Alphaorigin
Asal untuk menghitung jarak. Jika tidak ditentukan, jarak tidak dihitung. Ketinggian, jika diberikan, tidak digunakan dalam penghitungan.
Atribut HTML:
  • <gmp-place-autocomplete origin="lat,lng|lat,lng,altitude"></gmp-place-autocomplete>
requestedLanguage
Jenis:  string optional
ID bahasa untuk bahasa yang digunakan untuk menampilkan hasil, jika memungkinkan. Hasil dalam bahasa yang dipilih mungkin diberi peringkat yang lebih tinggi, tetapi saran tidak terbatas pada bahasa ini. Lihat daftar bahasa yang didukung.
Atribut HTML:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
Jenis:  string optional
Kode wilayah yang digunakan untuk pemformatan hasil dan untuk pemfilteran hasil. Hal ini tidak membatasi saran ke negara ini. Kode wilayah menerima nilai dua karakter ccTLD ("domain level teratas"). Umumnya kode ccTLD identik dengan kode ISO 3166-1, dengan beberapa pengecualian. Misalnya, ccTLD Inggris Raya adalah "uk" (.co.uk), sedangkan kode ISO 3166-1-nya adalah "gb" (secara teknis untuk entitas "The United Kingdom of Great Britain and Northern Ireland").
Atribut HTML:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
AlphaunitSystem
Jenis:  UnitSystem optional
Sistem satuan yang digunakan untuk menampilkan jarak. Jika tidak ditentukan, sistem unit ditentukan oleh requestedRegion.
Atribut HTML:
  • <gmp-place-autocomplete unit-system="metric|imperial"></gmp-place-autocomplete>
BetacomponentRestrictions
Jenis:  ComponentRestrictions optional
Batasan komponen. Pembatasan komponen digunakan untuk membatasi prediksi hanya pada prediksi dalam komponen induk. Misalnya, negara.
Betatypes
Jenis:  Array<string> optional
Jenis prediksi yang akan ditampilkan. Untuk jenis yang didukung, lihat panduan developer. Jika tidak ada jenis yang ditentukan, semua jenis akan ditampilkan.
Atribut HTML:
  • <gmp-place-autocomplete types="type1 type2 type3..."></gmp-place-autocomplete>
prediction-item
Item dalam drop-down prediksi yang mewakili satu prediksi.
prediction-item-icon
Ikon yang ditampilkan di sebelah kiri setiap item dalam daftar prediksi.
prediction-item-main-text
Bagian item prediksi yang merupakan teks utama prediksi. Untuk lokasi geografis, isinya adalah nama tempat, seperti 'Sydney', atau nama jalan dan nomor rumah, seperti '10 King Street'. Secara default, prediction-item-main-text berwarna hitam. Jika ada teks tambahan dalam prediction-item, teks tersebut berada di luar prediction-item-main-text dan mewarisi gayanya dari prediction-item. Secara default, warnanya abu-abu. Teks tambahan biasanya berupa alamat.
prediction-item-match
Bagian dari prediksi yang dikembalikan sesuai dengan masukan pengguna. Secara default, teks yang cocok ini disorot dalam teks tebal. Perhatikan bahwa teks yang cocok dapat berada di mana saja dalam prediction-item. Class ini belum tentu bagian dari prediction-item-main-text.
prediction-item-selected
Item saat pengguna menavigasi ke item tersebut melalui keyboard. Catatan: Item yang dipilih akan terpengaruh oleh gaya bagian ini dan juga gaya bagian item prediksi.
prediction-list
Elemen visual berisi daftar prediksi yang dikembalikan oleh layanan Place Autocomplete. Daftar ini muncul sebagai daftar dropdown di bawah PlaceAutocompleteElement.
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter: 
  • type:  string String peka huruf besar/kecil yang mewakili jenis peristiwa yang akan diproses.
  • listener:  EventListener|EventListenerObject Objek yang menerima notifikasi. Ini harus berupa fungsi atau objek dengan metode handleEvent
  • options:  boolean|AddEventListenerOptions optional Lihat opsi. Peristiwa kustom hanya mendukung capture dan passive.
Nilai yang Ditampilkan:  void
Menyiapkan fungsi yang akan dipanggil setiap kali peristiwa yang ditentukan dikirimkan ke target. Lihat addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parameter: 
  • type:  string String yang menentukan jenis peristiwa yang pemroses peristiwanya akan dihapus.
  • listener:  EventListener|EventListenerObject Pemroses peristiwa dari pengendali peristiwa yang akan dihapus dari target peristiwa.
  • options:  boolean|EventListenerOptions optional Lihat opsi.
Nilai yang Ditampilkan:  void
Menghapus pemroses peristiwa yang sebelumnya didaftarkan dengan addEventListener dari target. Lihat removeEventListener.
gmp-error
function(errorEvent)
Argumen: 
Peristiwa ini dipicu saat permintaan ke backend ditolak (misalnya, kunci API salah). Peristiwa ini tidak menggelembung.
gmp-select
function(placePredictionSelectEvent)
Argumen: 
Peristiwa ini diaktifkan saat pengguna memilih prediksi tempat. Berisi objek PlacePrediction yang dapat dikonversi menjadi objek Place.
gmp-placeselect
function(placeAutocompletePlaceSelectEvent)
Argumen: 
Peristiwa ini diaktifkan saat pengguna memilih prediksi tempat. Berisi objek Place.

PlaceAutocompleteElementOptions interface

google.maps.places.PlaceAutocompleteElementOptions interface

Opsi untuk membuat PlaceAutocompleteElement. Untuk deskripsi setiap properti, lihat properti dengan nama yang sama di class PlaceAutocompleteElement.
BetacomponentRestrictions optional
Jenis:  ComponentRestrictions optional
AlphaincludedPrimaryTypes optional
Jenis:  Array<string> optional
AlphaincludedRegionCodes optional
Jenis:  Array<string> optional
locationBias optional
Jenis:  LocationBias optional
locationRestriction optional
Jenis:  LocationRestriction optional
name optional
Jenis:  string optional
Alphaorigin optional
requestedLanguage optional
Jenis:  string optional
Betatypes optional
Jenis:  Array<string> optional
AlphaunitSystem optional
Jenis:  UnitSystem optional

Class PlaceAutocompletePlaceSelectEvent

Class google.maps.places.PlaceAutocompletePlaceSelectEvent

Peristiwa ini dibuat setelah pengguna memilih tempat dengan Elemen Place Autocomplete. Akses pilihan dengan event.place.

Class ini memperluas Event.

Akses dengan memanggil const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places").
Lihat Library di Maps JavaScript API.
Betaplace
Jenis:  Place

PlacePredictionSelectEvent class

Class google.maps.places.PlacePredictionSelectEvent

Peristiwa ini dibuat setelah pengguna memilih item prediksi dengan PlaceAutocompleteElement. Akses pilihan dengan event.placePrediction.

Class ini memperluas Event.

Akses dengan memanggil const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places").
Lihat Library di Maps JavaScript API.
placePrediction

PlaceAutocompleteRequestErrorEvent class

Class google.maps.places.PlaceAutocompleteRequestErrorEvent

Peristiwa ini dipancarkan oleh PlaceAutocompleteElement saat ada masalah dengan permintaan jaringan.

Class ini memperluas Event.

Akses dengan memanggil const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places").
Lihat Library di Maps JavaScript API.

Kelas PlaceDetailsElement

Class google.maps.places.PlaceDetailsElement

Elemen HTML yang menampilkan detail tempat. Gunakan metode configureFromPlace() atau configureFromLocation() untuk menentukan konten yang akan dirender. Untuk menggunakan Elemen Detail Tempat, aktifkan Places UI Kit API untuk project Anda di konsol Google Cloud.

Elemen kustom:
<gmp-place-details size="small"></gmp-place-details>

Class ini memperluas HTMLElement.

Class ini mengimplementasikan PlaceDetailsElementOptions.

Akses dengan memanggil const {PlaceDetailsElement} = await google.maps.importLibrary("places").
Lihat Library di Maps JavaScript API.
PlaceDetailsElement
PlaceDetailsElement([options])
Parameter: 
place
Jenis:  Place optional
Hanya baca. Objek Place yang berisi ID, lokasi, dan area tampilan tempat yang saat ini dirender.
size
Jenis:  PlaceDetailsSize optional
Varian ukuran PlaceDetailsElement. Secara default, elemen akan menampilkan PlaceDetailsSize.X_LARGE.
Atribut HTML:
  • <gmp-place-details size="small"></gmp-place-details>
  • <gmp-place-details size="medium"></gmp-place-details>
  • <gmp-place-details size="large"></gmp-place-details>
  • <gmp-place-details size="x-large"></gmp-place-details>
BetaaddEventListener
addEventListener(type, listener[, options])
Parameter: 
  • type:  string String peka huruf besar/kecil yang mewakili jenis peristiwa yang akan diproses.
  • listener:  EventListener|EventListenerObject Objek yang menerima notifikasi. Ini harus berupa fungsi atau objek dengan metode handleEvent
  • options:  boolean|AddEventListenerOptions optional Lihat opsi. Peristiwa kustom hanya mendukung capture dan passive.
Nilai yang Ditampilkan:  void
Menyiapkan fungsi yang akan dipanggil setiap kali peristiwa yang ditentukan dikirimkan ke target. Lihat addEventListener.
configureFromLocation
configureFromLocation(location)
Parameter: 
Nilai yang Ditampilkan:  Promise<void> Promise yang diselesaikan setelah data tempat dimuat dan dirender.
Mengonfigurasi widget dari LatLng menggunakan geocoding terbalik.
configureFromPlace
configureFromPlace(place)
Parameter: 
  • place:  Place|{id:string} Tempat untuk merender detail.
Nilai yang Ditampilkan:  Promise<void> Promise yang diselesaikan setelah data tempat dimuat dan dirender.
Mengonfigurasi widget dari objek Place atau ID Tempat.