Places Widgets

Class PlaceAutocompleteElement

class google.maps.places.PlaceAutocompleteElement extends HTMLElement implements PlaceAutocompleteElementOptions
library "places"

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

PlaceAutocompleteElement otomatis menggunakan AutocompleteSessionToken secara internal untuk mengelompokkan fase kueri dan pemilihan dari penelusuran pelengkapan otomatis pengguna.

Panggilan pertama ke Place.fetchFields pada Place yang ditampilkan oleh PlacePrediction.toPlace akan otomatis menyertakan token sesi yang digunakan untuk mengambil PlacePrediction.

Lihat https://developers.google.com/maps/documentation/places/web-service/place-session-tokens untuk mengetahui detail selengkapnya tentang cara kerja sesi.

<gmp-place-autocomplete
  description="string"
  disabled
  future-opening-businesses-included
  included-primary-types="type1 type2 type3..."
  included-region-codes="c1 c2 c3..."
  internal-usage-attribution-ids="space separated strings"
  maxlength="number"
  name="string"
  no-clear-button
  no-input-icon
  origin="lat,lng"
  placeholder="string"
  pure-service-area-businesses-included
  readonly
  requested-language="string"
  requested-region="string"
  unit-system="value-name">
</gmp-place-autocomplete>

const {PlaceAutocompleteElement} = await google.maps.importLibrary("places");

Antarmuka PlaceAutocompleteElementOptions

antarmuka google.maps.places.PlaceAutocompleteElementOptions
diimplementasikan oleh PlaceAutocompleteElement

Opsi untuk membuat PlaceAutocompleteElement. Untuk deskripsi setiap properti, lihat properti dengan nama yang sama di class PlaceAutocompleteElement.

Class PlacePredictionSelectEvent

class google.maps.places.PlacePredictionSelectEvent extends Event
library "places"

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

Konversi placePrediction menjadi Place dengan memanggil PlacePrediction.toPlace.

const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places");

Class BasicPlaceAutocompleteElement

class google.maps.places.BasicPlaceAutocompleteElement extends HTMLElement implements BasicPlaceAutocompleteElementOptions
library "places"

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

<gmp-basic-place-autocomplete
  description="string"
  disabled
  future-opening-businesses-included
  included-primary-types="type1 type2 type3..."
  included-region-codes="c1 c2 c3..."
  internal-usage-attribution-ids="space separated strings"
  maxlength="number"
  name="string"
  no-clear-button
  no-input-icon
  origin="lat,lng"
  placeholder="string"
  pure-service-area-businesses-included
  readonly
  requested-language="string"
  requested-region="string"
  unit-system="value-name">
</gmp-basic-place-autocomplete>

const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places");

Antarmuka BasicPlaceAutocompleteElementOptions

antarmuka google.maps.places.BasicPlaceAutocompleteElementOptions
diimplementasikan oleh BasicPlaceAutocompleteElement

Opsi untuk membuat BasicPlaceAutocompleteElement.

Class PlaceDetailsElement

class google.maps.places.PlaceDetailsElement extends HTMLElement implements PlaceDetailsElementOptions
diperluas oleh AdvancedPlaceDetailsElement
library "places"

Menampilkan detail tempat dalam tata letak penuh. Tambahkan PlaceDetailsPlaceRequestElement atau PlaceDetailsLocationRequestElement untuk menentukan tempat yang akan dirender. Tambahkan PlaceContentConfigElement, PlaceStandardContentElement, atau PlaceAllContentElement untuk menentukan konten yang akan dirender.

Contoh:

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details> 

<gmp-place-details
  internal-usage-attribution-ids="space separated strings">
</gmp-place-details>

const {PlaceDetailsElement} = await google.maps.importLibrary("places");

Antarmuka PlaceDetailsElementOptions

antarmuka google.maps.places.PlaceDetailsElementOptions
diperluas oleh AdvancedPlaceDetailsElementOptions
diimplementasikan oleh AdvancedPlaceDetailsElement, PlaceDetailsElement

Opsi untuk PlaceDetailsElement.

Class PlaceDetailsCompactElement

class google.maps.places.PlaceDetailsCompactElement extends HTMLElement implements PlaceDetailsCompactElementOptions
diperluas oleh AdvancedPlaceDetailsCompactElement
library "places"

Menampilkan detail tempat dalam tata letak yang ringkas. Tambahkan PlaceDetailsPlaceRequestElement atau PlaceDetailsLocationRequestElement untuk menentukan tempat yang akan dirender. Tambahkan PlaceContentConfigElement, PlaceStandardContentElement, atau PlaceAllContentElement untuk menentukan konten yang akan dirender.

Contoh:

 <gmp-place-details-compact>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details-compact> 

<gmp-place-details-compact
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  truncation-preferred>
</gmp-place-details-compact>

const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places");

Antarmuka PlaceDetailsCompactElementOptions

antarmuka google.maps.places.PlaceDetailsCompactElementOptions
diperluas oleh AdvancedPlaceDetailsCompactElementOptions
diimplementasikan oleh AdvancedPlaceDetailsCompactElement, PlaceDetailsCompactElement

Opsi untuk PlaceDetailsCompactElement.

Class AdvancedPlaceDetailsElement

class google.maps.places.AdvancedPlaceDetailsElement extends PlaceDetailsElement, HTMLElement implements AdvancedPlaceDetailsElementOptions, PlaceDetailsElementOptions
library "places"

Menampilkan detail tempat dalam tata letak penuh. Tambahkan PlaceDetailsPlaceRequestElement atau PlaceDetailsLocationRequestElement untuk menentukan tempat yang akan dirender. Tambahkan elemen PlaceStandardContentElement, PlaceAllContentElement, atau Place Details secara langsung untuk mengonfigurasi konten yang akan dirender.

Contoh:

 <gmp-advanced-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-standard-content>
   </gmp-place-standard-content>
 </gmp-advanced-place-details> 

<gmp-advanced-place-details
  internal-usage-attribution-ids="space separated strings">
</gmp-advanced-place-details>

const {AdvancedPlaceDetailsElement} = await google.maps.importLibrary("places");

Antarmuka AdvancedPlaceDetailsElementOptions

antarmuka google.maps.places.AdvancedPlaceDetailsElementOptions memperluas PlaceDetailsElementOptions
diimplementasikan oleh AdvancedPlaceDetailsElement

Opsi untuk AdvancedPlaceDetailsElement.

Class AdvancedPlaceDetailsCompactElement

class google.maps.places.AdvancedPlaceDetailsCompactElement extends PlaceDetailsCompactElement, HTMLElement implements AdvancedPlaceDetailsCompactElementOptions, PlaceDetailsCompactElementOptions
library "places"

Menampilkan detail tempat dalam tata letak yang ringkas. Tambahkan PlaceDetailsPlaceRequestElement atau PlaceDetailsLocationRequestElement untuk menentukan tempat yang akan dirender. Tambahkan PlaceStandardContentElement, PlaceAllContentElement, atau tentukan turunan konten tertentu untuk mengonfigurasi konten yang akan dirender.

Untuk menggunakan elemen ini, aktifkan Places UI Kit API untuk project Anda di Konsol Google Cloud.

<gmp-advanced-place-details-compact
  internal-usage-attribution-ids="space separated strings">
</gmp-advanced-place-details-compact>

const {AdvancedPlaceDetailsCompactElement} = await google.maps.importLibrary("places");

Antarmuka AdvancedPlaceDetailsCompactElementOptions

antarmuka google.maps.places.AdvancedPlaceDetailsCompactElementOptions memperluas PlaceDetailsCompactElementOptions
diimplementasikan oleh AdvancedPlaceDetailsCompactElement

Opsi untuk AdvancedPlaceDetailsCompactElement.

Konstanta PlaceDetailsOrientation

google.maps.places.PlaceDetailsOrientation
library "places"

Varian orientasi untuk PlaceDetailsCompactElement.

Konstanta ini juga dapat digunakan sebagai string. Di TypeScript, literal string ditentukan oleh jenis PlaceDetailsOrientationString.

const {PlaceDetailsOrientation} = await google.maps.importLibrary("places");

PlaceDetailsPlaceRequestElement

class google.maps.places.PlaceDetailsPlaceRequestElement extends HTMLElement implements PlaceDetailsPlaceRequestElementOptions
library "places"

Mengonfigurasi PlaceDetailsCompactElement atau PlaceDetailsElement untuk memuat data berdasarkan objek, ID, atau nama resource tempat. Tambahkan elemen ini sebagai turunan dari PlaceDetailsCompactElement atau PlaceDetailsElement untuk memuat data tempat yang ditentukan. Contoh:

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
 </gmp-place-details> 

<gmp-place-details-place-request
  place="places/###">
</gmp-place-details-place-request>

const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places");

Antarmuka PlaceDetailsPlaceRequestElementOptions

antarmuka google.maps.places.PlaceDetailsPlaceRequestElementOptions
diimplementasikan oleh PlaceDetailsPlaceRequestElement

Opsi untuk PlaceDetailsPlaceRequestElement.

Class PlaceDetailsLocationRequestElement

class google.maps.places.PlaceDetailsLocationRequestElement extends HTMLElement implements PlaceDetailsLocationRequestElementOptions
library "places"

Mengonfigurasi PlaceDetailsCompactElement atau PlaceDetailsElement untuk memuat data berdasarkan lokasi. Tambahkan elemen ini sebagai turunan dari PlaceDetailsCompactElement atau PlaceDetailsElement untuk memuat data lokasi yang ditentukan. Contoh:

 <gmp-place-details>
   <gmp-place-details-location-request
     location="37.6207665,-122.4284806"
   ></gmp-place-details-location-request>
 </gmp-place-details> 

<gmp-place-details-location-request
  location="lat,lng">
</gmp-place-details-location-request>

const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places");

PlaceDetailsLocationRequestElementOptions

antarmuka google.maps.places.PlaceDetailsLocationRequestElementOptions
diimplementasikan oleh PlaceDetailsLocationRequestElement

Opsi untuk PlaceDetailsLocationRequestElement.

Class PlaceSearchElement

class google.maps.places.PlaceSearchElement extends HTMLElement implements PlaceSearchElementOptions
diperluas oleh AdvancedPlaceSearchElement
library "places"

Menampilkan hasil penelusuran tempat dalam daftar. Tambahkan PlaceTextSearchRequestElement atau PlaceNearbySearchRequestElement untuk menentukan permintaan yang akan dirender hasilnya. Tambahkan PlaceContentConfigElement, PlaceStandardContentElement, atau PlaceAllContentElement untuk menentukan konten yang akan dirender.

Contoh:

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search> 

<gmp-place-search
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  selectable
  truncation-preferred>
</gmp-place-search>

const {PlaceSearchElement} = await google.maps.importLibrary("places");

Antarmuka PlaceSearchElementOptions

antarmuka google.maps.places.PlaceSearchElementOptions
diperluas oleh AdvancedPlaceSearchElementOptions
diimplementasikan oleh AdvancedPlaceSearchElement, PlaceSearchElement

Opsi untuk PlaceSearchElement.

Class AdvancedPlaceSearchElement

class google.maps.places.AdvancedPlaceSearchElement extends PlaceSearchElement, HTMLElement implements AdvancedPlaceSearchElementOptions, PlaceSearchElementOptions
library "places"

Menampilkan hasil Place Search lanjutan dalam daftar. Tambahkan PlaceTextSearchRequestElement atau PlaceNearbySearchRequestElement untuk menentukan permintaan yang akan dirender hasilnya. Tambahkan PlaceStandardContentElement, PlaceAllContentElement, atau <template slot="details-item"> untuk menentukan konten yang akan dirender.

Contoh:

 <gmp-advanced-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <template slot="details-item">
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </template>
 </gmp-advanced-place-search> 

<gmp-advanced-place-search
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  selectable
  truncation-preferred>
</gmp-advanced-place-search>

const {AdvancedPlaceSearchElement} = await google.maps.importLibrary("places");

Antarmuka AdvancedPlaceSearchElementOptions

antarmuka google.maps.places.AdvancedPlaceSearchElementOptions memperluas PlaceSearchElementOptions
diimplementasikan oleh AdvancedPlaceSearchElement

Opsi untuk AdvancedPlaceSearchElement.

Class AdvancedPlaceListElement

class google.maps.places.AdvancedPlaceListElement extends HTMLElement implements AdvancedPlaceListElementOptions
library "places"

Menampilkan hasil penelusuran tempat dalam daftar. Tambahkan satu atau beberapa PlaceDetailsPlaceRequestElement atau tetapkan properti places untuk menentukan tempat yang akan ditampilkan. Tambahkan PlaceStandardContentElement atau PlaceAllContentElement untuk menentukan konten yang akan dirender.

Contoh:

 <gmp-advanced-place-list>
   <gmp-place-details-place-request
     place="PLACE_ID"
   </gmp-place-details-place-request>
   <template slot="details-item">
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </template>
 </gmp-advanced-place-list> 

<gmp-advanced-place-list
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  places="space separated strings"
  selectable
  truncation-preferred>
</gmp-advanced-place-list>

const {AdvancedPlaceListElement} = await google.maps.importLibrary("places");

Antarmuka AdvancedPlaceListElementOptions

antarmuka google.maps.places.AdvancedPlaceListElementOptions
diimplementasikan oleh AdvancedPlaceListElement

Opsi untuk AdvancedPlaceListElement.

PlaceSearchAttributionPosition konstanta

google.maps.places.PlaceSearchAttributionPosition
library "places"

Posisi atribusi untuk PlaceSearchElement.

Konstanta ini juga dapat digunakan sebagai string. Di TypeScript, literal string ditentukan oleh jenis PlaceSearchAttributionPositionString.

const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places");

Konstanta PlaceSearchOrientation

google.maps.places.PlaceSearchOrientation
library "places"

Varian orientasi untuk PlaceSearchElement.

Konstanta ini juga dapat digunakan sebagai string. Di TypeScript, literal string ditentukan oleh jenis PlaceSearchOrientationString.

const {PlaceSearchOrientation} = await google.maps.importLibrary("places");

Class PlaceSelectEvent

class google.maps.places.PlaceSelectEvent extends Event
library "places"

Peristiwa ini diaktifkan saat tempat dipilih dari daftar tempat. Akses pilihan dengan event.place.

const {PlaceSelectEvent} = await google.maps.importLibrary("places");

Class PlaceNearbySearchRequestElement

class google.maps.places.PlaceNearbySearchRequestElement extends HTMLElement implements PlaceNearbySearchRequestElementOptions
library "places"

Mengonfigurasi PlaceSearchElement untuk memuat hasil berdasarkan permintaan Nearby Search. Properti locationRestriction diperlukan agar elemen penelusuran dapat dimuat. Properti lain yang dikonfigurasi akan diabaikan jika locationRestriction tidak ditetapkan. Tambahkan elemen ini sebagai turunan dari PlaceSearchElement untuk memuat hasil. Contoh:

 <gmp-place-search>
   <gmp-place-nearby-search-request
     location-restriction="RADIUS@LAT,LNG"
   ></gmp-place-nearby-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search> 

<gmp-place-nearby-search-request
  excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."
  excluded-types="excluded-type1 excluded-type2..."
  included-primary-types="included-primary-type1 included-primary-type2..."
  included-types="included-type1 included-type2..."
  location-restriction="radius@lat,lng"
  max-result-count="number"
  rank-preference="value-name">
</gmp-place-nearby-search-request>

const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places");

Antarmuka PlaceNearbySearchRequestElementOptions

antarmuka google.maps.places.PlaceNearbySearchRequestElementOptions
diimplementasikan oleh PlaceNearbySearchRequestElement

Opsi untuk PlaceNearbySearchRequestElement.

Class PlaceTextSearchRequestElement

class google.maps.places.PlaceTextSearchRequestElement extends HTMLElement implements PlaceTextSearchRequestElementOptions
library "places"

Mengonfigurasi PlaceSearchElement untuk memuat hasil berdasarkan permintaan penelusuran teks. Properti textQuery diperlukan agar elemen penelusuran dapat dimuat. Properti lain yang dikonfigurasi akan diabaikan jika textQuery tidak ditetapkan. Tambahkan elemen ini sebagai turunan dari PlaceSearchElement untuk memuat hasil. Contoh:

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search> 

<gmp-place-text-search-request
  ev-connector-types="ev-connector-type1 ev-connector-type2..."
  ev-minimum-charging-rate-kw="number"
  included-type="type"
  is-open-now
  location-bias="lat,lng"
  location-restriction="southwest-lat,southwest-lng|northeast-lat,northeast-lng"
  max-result-count="number"
  min-rating="number"
  price-levels="price-level1 price-level2..."
  rank-preference="value-name"
  text-query="string"
  use-strict-type-filtering>
</gmp-place-text-search-request>

const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places");

Antarmuka PlaceTextSearchRequestElementOptions

antarmuka google.maps.places.PlaceTextSearchRequestElementOptions
diimplementasikan oleh PlaceTextSearchRequestElement

Opsi untuk PlaceTextSearchRequestElement.

Class Autocomplete

class google.maps.places.Autocomplete extends MVCObject
library "places"

Widget yang memberikan prediksi Tempat berdasarkan input teks pengguna. Widget ini terhubung ke elemen input jenis text, dan memproses entri teks di kolom tersebut. Daftar prediksi ditampilkan sebagai menu drop-down, dan diperbarui saat teks dimasukkan.

const {Autocomplete} = await google.maps.importLibrary("places");

Antarmuka AutocompleteOptions

antarmuka google.maps.places.AutocompleteOptions

Opsi yang dapat ditetapkan pada objek Autocomplete.

Class SearchBox

class google.maps.places.SearchBox extends MVCObject
library "places"

Widget yang memberikan prediksi kueri berdasarkan input teks pengguna. Widget ini terhubung ke elemen input jenis text, dan memproses entri teks di kolom tersebut. Daftar prediksi ditampilkan sebagai menu drop-down, dan diperbarui saat teks dimasukkan.

const {SearchBox} = await google.maps.importLibrary("places");

Antarmuka SearchBoxOptions

antarmuka google.maps.places.SearchBoxOptions

Opsi yang dapat ditetapkan pada objek SearchBox.

Class PlaceContextualElement

class google.maps.places.PlaceContextualElement extends HTMLElement implements PlaceContextualElementOptions
library "places"

Widget yang menggunakan token konteks untuk menampilkan Tampilan Kontekstual dari respons Grounding with Google Maps.

<gmp-place-contextual
  context-token="string">
</gmp-place-contextual>

const {PlaceContextualElement} = await google.maps.importLibrary("places");

Antarmuka PlaceContextualElementOptions

antarmuka google.maps.places.PlaceContextualElementOptions
diimplementasikan oleh PlaceContextualElement

Opsi untuk PlaceContextualElement.

Class PlaceContextualListConfigElement

class google.maps.places.PlaceContextualListConfigElement extends HTMLElement implements PlaceContextualListConfigElementOptions
library "places"

Elemen HTML yang mengonfigurasi opsi untuk tampilan daftar Elemen Kontekstual Tempat.

<gmp-place-contextual-list-config
  layout="value-name"
  map-hidden>
</gmp-place-contextual-list-config>

const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places");

Antarmuka PlaceContextualListConfigElementOptions

antarmuka google.maps.places.PlaceContextualListConfigElementOptions
diimplementasikan oleh PlaceContextualListConfigElement

Opsi untuk PlaceContextualListConfigElement.

PlaceContextualListLayout

google.maps.places.PlaceContextualListLayout
library "places"

Daftar tata letak yang didukung Elemen Kontekstual Tempat untuk tampilan daftar.

Konstanta ini juga dapat digunakan sebagai string. Di TypeScript, literal string ditentukan oleh jenis PlaceContextualListLayoutString.

const {PlaceContextualListLayout} = await google.maps.importLibrary("places");