Elemen Place Search Lanjutan (pratinjau)

AdvancedPlaceSearchElement adalah elemen HTML yang merender hasil penelusuran tempat dalam daftar. Ada dua cara untuk mengonfigurasi elemen gmp-advanced-place-search:

Penelusuran di sekitar dan penelusuran menurut teks menawarkan fitur lanjutan yang sama, termasuk menyesuaikan tombol tindakan, memfilter ulasan dan media, mengonfigurasi atribusi Tempat, serta menangani pemilihan dan error tempat.

Permintaan penelusuran di sekitar

Pilih jenis tempat dari menu untuk melihat hasil penelusuran di sekitar untuk jenis tempat tersebut.

Penelusuran di sekitar terutama dikonfigurasi untuk menelusuri menurut jenis dan lokasi tempat, dan hasilnya dapat diberi peringkat berdasarkan jarak atau popularitas menggunakan properti rankPreference. Lihat dokumentasi referensi class PlaceNearbySearchRequestElement untuk mengetahui detail selengkapnya.

Contoh ini merender elemen Penelusuran Tempat Lanjutan sebagai respons terhadap penelusuran di sekitar dengan jenis tempat yang dipilih pengguna. Contoh ini juga menampilkan AdvancedPlaceDetailsCompactElement untuk tempat yang dipilih.

Untuk menambahkan elemen Penelusuran Tempat Lanjutan ke peta, tambahkan gmp-advanced-place-search elemen dengan gmp-place-nearby-search-request elemen bertingkat ke halaman HTML. 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

Elemen select memungkinkan pengguna memilih jenis tempat dari menu. Untuk mempermudah, hanya tiga jenis tempat yang tercantum: restoran, kafe, dan stasiun pengisian daya kendaraan listrik. 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

Saat pengguna memilih jenis tempat dari menu, elemen gmp-place-nearby-search-request akan diperbarui, dan elemen Penelusuran Tempat Lanjutan akan menampilkan hasilnya.

Permintaan penelusuran menurut teks

Masukkan istilah penelusuran di kolom input, lalu klik tombol Telusuri untuk mendapatkan daftar tempat yang cocok dengan istilah tersebut.

Penelusuran menurut teks terutama dikonfigurasi untuk menelusuri menggunakan kueri teks dan lokasi, dan hasilnya dapat disaring berdasarkan tingkat harga, rating, dan apakah tempat tersebut saat ini buka. Hasil juga dapat diberi peringkat berdasarkan jarak atau popularitas menggunakan properti rankPreference. Lihat dokumentasi referensi class PlaceTextSearchRequestElement untuk mengetahui detail selengkapnya.

Contoh ini merender elemen Penelusuran Tempat Lanjutan sebagai respons terhadap input teks pengguna. Contoh ini juga menampilkan AdvancedPlaceDetailsCompactElement untuk tempat yang dipilih.

Untuk menambahkan elemen Place Search Lanjutan ke peta, tambahkan elemen gmp-advanced-place-search dengan elemen gmp-place-text-search-request bertingkat ke halaman HTML. 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

Elemen input memungkinkan pengguna memasukkan teks penelusuran. 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

Saat pengguna mengklik tombol Telusuri, fungsi penelusuran akan dijalankan, elemen gmp-place-text-search-request akan diperbarui, dan elemen Place Search Lanjutan akan menampilkan hasilnya.

Fitur lanjutan

Menyesuaikan tombol tindakan

Tambahkan tombol tindakan sebagai turunan di dalam elemen <template slot="place-list-item"> dari komponen Place Search Lanjutan. Gunakan <gmp-place-link> untuk koneksi navigasi standar, dan tentukan atribut action secara eksplisit. Anda dapat secara opsional menentukan atribut slot. Tindakan standar yang valid adalah open-website, open-directions, open-map, dan call. Jika atribut slot dihilangkan, nilai defaultnya adalah action-main. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-search>

Memfilter ulasan dan media

Contoh kode ini hanya menampilkan media dan ulasan yang menyebutkan "kopi".

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

Mengonfigurasi atribusi Tempat

Untuk mengonfigurasi atribusi visual, tambahkan elemen <gmp-place-attribution> untuk menampilkan konfigurasi atribusi data Maps API menyeluruh, seperti sumber foto atau ulasan. Elemen ini harus ditambahkan sebagai kerabat langsung dari <template>. Atribusi yang ditempatkan di dalam elemen <template> akan diabaikan. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-search>

Menangani pemilihan dan error tempat

Jika atribut selectable ada, Anda dapat memproses peristiwa gmp-select untuk mengambil tempat yang dipilih pengguna. Anda juga dapat memproses peristiwa gmp-error untuk menangani skenario dengan baik saat data tempat gagal diambil. 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});