Elemen Detail Tempat Lanjutan (pratinjau)

Elemen Detail Tempat Lanjutan dan Elemen Ringkas Detail Tempat Lanjutan adalah elemen HTML yang merender detail untuk suatu tempat:

Elemen Detail Tempat Lanjutan dan Elemen Detail Tempat Lanjutan Ringkas menawarkan fitur lanjutan yang sama, termasuk menyesuaikan tombol tindakan, menghilangkan nama tempat, dan memfilter ulasan dan media.

Gunakan Alat penyesuaian untuk memvisualisasikan pengaruh berbagai kumpulan properti terhadap tampilan elemen Detail Tempat dan mengakses kode dalam HTML/CSS, Kotlin/XML, dan Swift.

Elemen Detail Tempat Lanjutan (pratinjau)

Klik penanda di peta untuk melihat detail tempatnya di Elemen Detail Tempat Lanjutan.

AdvancedPlaceDetailsElement mendukung berbagai elemen konten, termasuk jam buka lengkap, situs, nomor telepon, ringkasan berteknologi AI dengan penggantian ke ringkasan editorial, sorotan khusus jenis, ulasan, ringkasan ulasan berteknologi AI, kode plus, dan daftar fitur.

Untuk menampilkan detail tempat di peta, tambahkan elemen gmp-advanced-place-details ke elemen gmp-map di halaman HTML. Sertakan elemen turunan, gmp-place-details-place-request, untuk memilih tempat. Ini dapat berupa objek Place, ID tempat, atau nama resource Place: 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-advanced-place-details>
      <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-advanced-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Mengonfigurasi konten

Anda dapat mengontrol konten tempat tertentu yang ditampilkan oleh elemen gmp-advanced-place-details dengan menyusun elemen turunan untuk memilih dan mengonfigurasi detail tempat, seperti yang ditunjukkan dalam contoh ini: 

        <gmp-advanced-place-details>
            <gmp-place-details-place-request
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
                <gmp-place-attribution></gmp-place-attribution>
        </gmp-advanced-place-details>

Setiap elemen konten turunan memilih detail tempat yang sesuai untuk ditampilkan: gmp-place-address memilih alamat tempat, gmp-place-price memilih tingkat harga tempat, dll. Elemen gmp-place-summary dan gmp-place-review-summary memberikan ringkasan yang didukung AI tentang tempat dan ulasannya masing-masing. Urutan elemen turunan tidak relevan, karena detail yang dipilih selalu dirender dalam urutan tetap yang telah ditentukan sebelumnya.

Beberapa elemen ini dapat dikonfigurasi lebih lanjut menggunakan atribut spesifik per konten:

  • Elemen gmp-place-media digunakan untuk menampilkan satu foto, dan menyertakan atribut lightbox-preferred yang membuka foto dalam lightbox saat diklik. Lightbox dinonaktifkan secara default.
  • Elemen gmp-place-attribution digunakan untuk menampilkan konfigurasi atribusi data Maps API secara keseluruhan, seperti sumber foto atau ulasan. Atribut light-scheme-color dan dark-scheme-color digunakan untuk menetapkan warna teks atribusi dalam mode terang dan gelap.

Lihat dokumentasi referensi Penyesuaian Konten Widget Tempat untuk mengetahui informasi selengkapnya tentang semua elemen konten yang didukung.

Untuk mempermudah, Anda juga dapat menggunakan gmp-place-all-content untuk menampilkan semua detail yang tersedia di elemen Detail Tempat Lanjutan, atau dengan gmp-place-standard-content untuk menampilkan konfigurasi standar.

Mengonfigurasi tampilan

Rentang lebar yang direkomendasikan untuk elemen gmp-advanced-place-details adalah 250 px-400 px. Lebar kurang dari 250 piksel mungkin tidak ditampilkan dengan benar. Tetapkan tinggi agar sesuai dengan aplikasi Anda. Elemen Detail Tempat Lanjutan dirancang untuk men-scroll dalam ruang yang dialokasikan sesuai kebutuhan.

Elemen gmp-advanced-place-details juga mendukung berbagai properti CSS kustom untuk mengonfigurasi warna dan font elemen. Lihat Penataan Gaya Kustom Kit UI Places untuk mengetahui detail selengkapnya.

Elemen Ringkas Detail Tempat Lanjutan (pratinjau)

Klik penanda di peta untuk melihat detail tempatnya dalam Elemen Ringkas Detail Tempat Lanjutan.

AdvancedPlaceDetailsCompactElement merender detail untuk tempat yang dipilih menggunakan ruang minimal. Hal ini mungkin berguna di jendela info yang menandai tempat di peta, dalam pengalaman media sosial seperti membagikan lokasi dalam chat, sebagai saran untuk memilih lokasi Anda saat ini, atau dalam artikel media untuk merujuk tempat di Google Maps. AdvancedPlaceDetailsCompactElement dapat menampilkan nama, alamat, rating, jenis, harga, ikon aksesibilitas, status buka, dan satu foto. Dapat ditampilkan secara horizontal atau vertikal, seperti yang dipilih oleh atribut orientation.

Dalam cuplikan berikut, gmp-advanced-place-details-compact dikonfigurasi dengan orientation disetel ke horizontal. Atribut tambahan, truncation-preferred, memotong konten tertentu agar pas dalam satu baris, bukan menggabungkannya. Elemen gmp-advanced-place-details-compact berisi elemen turunan, gmp-place-details-place-request, untuk memilih tempat. Ini bisa berupa objek Place, ID tempat, atau nama resource Place. 

  <gmp-advanced-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-advanced-place-details-compact>

Mengonfigurasi konten

Anda dapat mengontrol konten tempat tertentu yang ditampilkan oleh elemen gmp-advanced-place-details-compact dengan menyusun elemen turunan untuk memilih dan mengonfigurasi detail tempat, seperti yang ditunjukkan dalam cuplikan ini: 

<gmp-advanced-place-details-compact>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-photo></gmp-place-photo>
    <gmp-place-name></gmp-place-name>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-address></gmp-place-address>
    <gmp-place-opening-hours></gmp-place-opening-hours>
    <gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details-compact>

Setiap elemen konten turunan memilih detail tempat yang sesuai untuk ditampilkan. Urutan elemen turunan tidak relevan, karena detail yang dipilih selalu dirender dalam urutan tetap yang telah ditentukan sebelumnya. Beberapa elemen ini dapat dikonfigurasi lebih lanjut menggunakan atribut khusus konten.

Lihat dokumentasi referensi Penyesuaian Konten Widget Tempat untuk mengetahui informasi selengkapnya tentang semua elemen konten yang didukung.

Agar lebih sederhana, Anda juga dapat menggunakan gmp-place-all-content untuk menampilkan semua detail yang tersedia di elemen Ringkas Detail Tempat Lanjutan atau dengan gmp-place-standard-content untuk menampilkan konfigurasi standar.

Mengonfigurasi tampilan

Rentang lebar yang direkomendasikan untuk elemen gmp-advanced-place-details-compact dalam orientasi vertikal adalah 180 px-300 px. Lebar kurang dari 160 piksel mungkin tidak ditampilkan dengan benar. Jangan tetapkan tinggi tetap.

Rentang lebar yang direkomendasikan untuk elemen gmp-advanced-place-details-compact dalam orientasi horizontal adalah 180 px-500 px. Lebar yang kurang dari 160 piksel mungkin tidak ditampilkan dengan benar. Pada lebar kurang dari 350 piksel, gambar thumbnail tidak akan ditampilkan. Jangan tetapkan tinggi tetap.

Elemen gmp-advanced-place-details-compact juga mendukung berbagai properti CSS kustom untuk mengonfigurasi warna dan font elemen. Lihat Penataan Gaya Kustom Kit UI Places untuk mengetahui detail selengkapnya.

Perhatikan bahwa jika elemen Ringkas Detail Tempat Lanjutan ditambahkan ke jendela info, gaya kustom harus diterapkan langsung ke elemen gmp-advanced-place-details-compact. Hal ini karena jendela info adalah bagian dari shadow DOM peta, sehingga gaya CSS eksternal tidak akan diterapkan. 

gmp-advanced-place-details-compact {
  --gmp-color-surface: #202124;
  --gmp-color-on-surface: #ffffff;
  --gmp-color-on-surface-variant: #9aa0a6;
  --gmp-color-primary: #8ab4f8;
  --gmp-font-family: "Roboto", sans-serif;
}

Contoh ini menunjukkan cara menambahkan AdvancedPlaceDetailsCompactElement ke peta secara terprogram menggunakan InfoWindow dan AdvancedMarkerElement.

Fitur lanjutan

Menyesuaikan tombol tindakan

Tambahkan tombol tindakan sebagai turunan langsung komponen Detail 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, nilai defaultnya adalah action-main. 

<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <!-- Other content items -->
  <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
  <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</gmp-advanced-place-details-compact>

Persyaratan atribusi visual

Penting: Anda harus menjelaskan kepada pengguna akhir kapan tombol tindakan kustom akan membagikan informasi pengguna kepada pihak ketiga selain Google. Lihat persyaratan atribusi visual.

Menghilangkan Nama tempat

Untuk menghilangkan nama tempat, kecualikan secara eksplisit elemen <gmp-place-name> dari konten kustom Anda. 

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <!-- Exclude <gmp-place-name> to hide the place name -->
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-address></gmp-place-address>
</gmp-advanced-place-details>

Memfilter ulasan dan media

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

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <gmp-place-media query="coffee"></gmp-place-media>
  <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</gmp-advanced-place-details>

Anda juga dapat menggunakan JavaScript untuk mengambil jumlah total item yang cocok dengan kueri penelusuran tertentu dengan membaca properti searchMediaCount dan searchReviewsCount. Anda harus menunggu peristiwa gmp-load sebelum mengakses properti ini. 

const detailsElement = document.querySelector('gmp-advanced-place-details');
const mediaElement = detailsElement.querySelector('gmp-place-media');
mediaElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching photos: ', e.target.searchMediaCount);
});

const reviewsElement = detailsElement.querySelector('gmp-place-reviews');
reviewsElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching reviews: ', e.target.searchReviewsCount);
});