Elemen Place Details

Pilih platform: Android iOS JavaScript

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

Elemen Place Details

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

PlaceDetailsElement 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-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-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 menggunakan elemen gmp-place-content-config bertingkat 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-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>

Elemen gmp-place-content-config itu sendiri berisi sejumlah elemen konten turunan, dan masing-masing 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 khusus 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 sumber foto. Atribut light-scheme-color dan dark-scheme-color digunakan untuk menetapkan warna teks atribusi dalam mode terang dan gelap.

Lihat dokumentasi referensi PlaceContentConfigElement untuk mengetahui informasi selengkapnya tentang semua elemen konten yang didukung.

Agar lebih sederhana, elemen gmp-place-content-config dapat diganti dengan gmp-place-all-content untuk menampilkan semua detail yang tersedia di elemen Detail Tempat, atau dengan gmp-place-standard-content untuk menampilkan konfigurasi standar.

Mengonfigurasi tampilan

Rentang lebar yang direkomendasikan untuk elemen gmp-place-details adalah 250 px-400 px. Lebar yang kurang dari 250 piksel 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 Kit UI Places 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 initMap() {
    // 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 && 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 =
                google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
            marker.style.display = 'block';
        }
    };
    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', (event) => {
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (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';
        }
    });
}
initMap();
index.js

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;
}
style.css

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" defer></script>
        <!-- prettier-ignore -->
        <script>
      (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </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>
index.html

Mencoba Contoh

Elemen Ringkas Place Details

Klik penanda di peta untuk melihat detail tempatnya dalam 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 membagikan 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 disetel ke horizontal. Atribut tambahan, truncation-preferred, memotong konten tertentu agar pas dalam satu baris, bukan menggabungkannya. 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 Place. 

  <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 menggunakan elemen gmp-place-content-config bertingkat untuk memilih dan mengonfigurasi detail tempat, seperti yang ditunjukkan dalam cuplikan ini: 

<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>
index.html

Elemen gmp-place-content-config itu sendiri berisi sejumlah elemen konten turunan, dan masing-masing 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 PlaceContentConfigElement untuk mengetahui informasi selengkapnya tentang semua elemen konten yang didukung.

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

Mengonfigurasi tampilan

Rentang lebar yang direkomendasikan untuk elemen gmp-place-details-compact dalam orientasi vertikal adalah 180 px-300 px. Lebar yang 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 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-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 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>
index.html

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 initMap() {
    // Request needed libraries.
    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 =
        google.maps.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', (event) => {
        // 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) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        event.stop();
        if (event.placeId) {
            // 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.');
        }
    });
}
initMap();
index.js

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;
}
style.css

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" defer></script>
        <!-- prettier-ignore -->
        <script>
      (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </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>
index.html

Mencoba Contoh