Elemen Place Details

Elemen Place Details dan Elemen Place Details Compact adalah elemen HTML yang merender detail untuk suatu tempat:

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

Elemen Place Details

Klik penanda di peta untuk melihat detail tempatnya di Elemen Place Details.

PlaceDetailsElement mendukung berbagai elemen konten, termasuk jam buka lengkap, situs, nomor telepon, ringkasan yang didukung AI dengan penggantian ke ringkasan editorial, sorotan khusus jenis, ulasan, ringkasan ulasan yang didukung AI, plus code, dan daftar fitur.

Untuk menampilkan Place Details di peta, tambahkan elemen gmp-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 Tempat: 

<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-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Mengonfigurasi konten

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

        <gmp-place-details>
            <gmp-place-details-place-request
                place="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-details>

Setiap elemen konten turunan memilih Place Details 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 masing-masing memberikan ringkasan yang didukung AI tentang tempat dan ulasannya. Urutan elemen turunan tidak relevan, karena detail yang dipilih selalu dirender dalam urutan yang telah ditentukan sebelumnya. Hanya elemen konten yang Anda sertakan yang akan ditampilkan, jadi sertakan gmp-place-name untuk menampilkan nama tempat.

Beberapa elemen ini dapat dikonfigurasi lebih lanjut menggunakan atribut khusus konten:

  • Elemen gmp-place-media digunakan untuk menampilkan satu foto, dan menyertakan atribut lightbox-preferred yang membuka foto di lightbox saat diklik. Lightbox dinonaktifkan secara default.
  • Elemen gmp-place-attribution digunakan untuk menampilkan sumber foto. 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 Place untuk mengetahui informasi selengkapnya tentang semua elemen konten yang didukung.

Untuk memudahkan, Anda juga dapat menggunakan gmp-place-all-content untuk menampilkan semua detail yang tersedia di elemen Place Details, atau gmp-place-standard-content untuk menampilkan konfigurasi standar. Kedua elemen ini menyertakan nama tempat.

Mengonfigurasi tampilan

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

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

Lihat contoh kode lengkap

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');

async function init() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });

    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        marker.position = null;
        event.stop();
        if ('placeId' in event && event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        } else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}

void init();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <gmp-place-details>
                    <gmp-place-details-place-request
                        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                    <gmp-place-content-config>
                        <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-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>

Elemen Ringkas Place Details

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

PlaceDetailsCompactElement 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 berbagi lokasi dalam chat, sebagai saran untuk memilih lokasi Anda saat ini, atau dalam artikel media untuk merujuk tempat di Google Maps. PlaceDetailsCompactElement 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-place-details-compact dikonfigurasi dengan orientation yang ditetapkan ke horizontal. Atribut tambahan, truncation-preferred, memotong konten tertentu agar pas dalam satu baris, bukan digabungkan. Elemen gmp-place-details-compact berisi elemen turunan, gmp-place-details-place-request, untuk memilih tempat. Ini dapat berupa objek Place, ID tempat, atau nama resource Tempat. 

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

Mengonfigurasi konten

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

<gmp-place-details-compact orientation="horizontal" truncation-preferred>
  <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <gmp-place-media lightbox-preferred></gmp-place-media>
  <gmp-place-name></gmp-place-name>
  <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-open-now-status></gmp-place-open-now-status>
  <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
</gmp-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. Hanya elemen konten yang Anda sertakan yang akan ditampilkan, jadi sertakan gmp-place-name untuk menampilkan nama tempat. Beberapa elemen ini dapat dikonfigurasi lebih lanjut menggunakan atribut khusus konten.

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

Untuk memudahkan, Anda juga dapat menggunakan gmp-place-all-content untuk menampilkan semua detail yang tersedia di elemen Place Details Compact, atau gmp-place-standard-content untuk menampilkan konfigurasi standar. Kedua elemen ini menyertakan nama tempat.

Mengonfigurasi tampilan

Rentang lebar yang direkomendasikan untuk elemen gmp-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-place-details-compact dalam orientasi horizontal adalah 180 px-500 px. Lebar 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-place-details-compact juga mendukung berbagai properti CSS kustom untuk mengonfigurasi warna dan font elemen. Lihat Penataan Gaya Kustom Places UI Kit untuk mengetahui detail selengkapnya.

Perhatikan bahwa jika elemen Place Details Compact ditambahkan ke jendela info, gaya kustom harus diterapkan langsung ke elemen gmp-place-details-compact. Hal ini karena jendela info adalah bagian dari DOM bayangan peta, sehingga gaya CSS eksternal tidak akan diterapkan. 

<gmp-place-details-compact
    orientation="horizontal"
    truncation-preferred
    style="
        width: 400px;
        padding: 0;
        margin: 0;
        border: none;
        background-color: transparent;
        color-scheme: light;
    ">
    <gmp-place-details-place-request
        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

Lihat contoh kode lengkap

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details-compact');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');
async function init() {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        event.stop();

        if ('placeId' in event) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            console.log('No place was selected.');
        }
    });
}
void init();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details Compact with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
        </div>
        <!--
        The gmp-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <gmp-place-media lightbox-preferred></gmp-place-media>
                <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-open-now-status></gmp-place-open-now-status>
                <gmp-place-attribution
                    light-scheme-color="gray"
                    dark-scheme-color="white"></gmp-place-attribution>
            </gmp-place-content-config>
        </gmp-place-details-compact>
    </body>
</html>