Elemen Daftar Tempat Tingkat Lanjut (pratinjau)

AdvancedPlaceListElement adalah elemen HTML yang merender kumpulan tempat dalam daftar yang diberikan Nama Resource Tempat.

Elemen Daftar Tempat Lanjutan menawarkan fitur lanjutan, termasuk menyesuaikan tombol tindakan, mengonfigurasi atribusi Tempat, dan menangani error.

Penggunaan dasar

Untuk menggunakan komponen, tambahkan elemen <gmp-advanced-place-list> ke halaman Anda dan teruskan daftar nama resource tempat yang dipisahkan koma melalui atribut places. 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU,places/ChIJyWEHuEmuEmsRm9hTkapTCrk">
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-address></gmp-place-address>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-list>

Fitur lanjutan

Menyesuaikan tombol tindakan

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

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <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-list>

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-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <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-list>

Menangani error

Anda dapat memproses peristiwa gmp-error untuk menangani skenario dengan baik saat satu atau beberapa tempat yang diminta gagal dimuat. 

const listElement = document.querySelector('gmp-advanced-place-list');
listElement.addEventListener('gmp-error', (e) => {
  // e.detail.errors contains an array of failure objects with specific failed Resource Names
  console.error('Failed to load places: ', e.detail.errors);
});