Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Elemen Detail Tempat Lanjutan (pratinjau)

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

The AdvancedPlaceDetailsElement mendukung semua data Tempat yang dapat divisualisasikan, dan mungkin menyertakan beberapa foto.
The AdvancedPlaceDetailsCompactElement dirancang untuk menggunakan ruang minimal dan menampilkan kumpulan informasi ringkas tentang suatu tempat, termasuk nama, alamat, rating, dll. Elemen ini juga dapat menyertakan satu foto.

Elemen Detail Tempat Lanjutan dan Elemen Detail Tempat Lanjutan Ringkas menawarkan fitur lanjutan, termasuk menyesuaikan tombol tindakan, menghilangkan nama tempat, serta 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.

The AdvancedPlaceDetailsElement 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 kode, 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. Elemen 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 gmp-advanced-place-details elemen dengan menyarangkan 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 tampilkan: 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 tempat dan ulasannya yang didukung AI, masing-masing. Urutan elemen turunan tidak relevan, karena detail yang dipilih selalu dirender dalam urutan tetap yang telah ditentukan.

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

Elemen gmp-place-media digunakan untuk menampilkan satu foto, dan menyertakan lightbox-preferred atribut yang membuka foto dalam lightbox saat diklik. Lightbox dinonaktifkan secara default.
Elemen gmp-place-attribution digunakan untuk menampilkan konfigurasi atribusi data Maps API menyeluruh, 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 Penyesuaian Konten Widget Tempat dokumentasi referensi 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 piksel-400 piksel. Lebar kurang dari 250 piksel mungkin tidak ditampilkan dengan benar. Tetapkan tinggi agar sesuai dengan aplikasi Anda. Elemen Detail Tempat Lanjutan dirancang untuk di-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 Penyesuaian Gaya UI Kit Tempat untuk mengetahui detail selengkapnya.

Lihat contoh kode lengkap

TypeScript

// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;

async function init(): Promise<void> {
    // 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: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            marker.position = null;
            event.stop();
            if ('placeId' in event && event.placeId) {
                // Fire when the user clicks a POI.
                placeDetailsRequest.setAttribute(
                    'place',
                    `places/${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();index.ts

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-advanced-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.setAttribute(
                'place',
                `places/${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();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"></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",
                v: "beta"
            });
        </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-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-advanced-place-details>
            </div>
        </div>
    </body>
</html>index.html

Elemen Detail Tempat Lanjutan Ringkas (pratinjau)

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

The AdvancedPlaceDetailsCompactElement merender detail untuk tempat yang dipilih menggunakan ruang minimal. Hal ini dapat 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 mereferensikan tempat di Google Maps. The AdvancedPlaceDetailsCompactElement dapat menampilkan nama, alamat, rating, jenis, harga, ikon aksesibilitas, status buka, dan satu foto. Elemen ini dapat ditampilkan secara horizontal atau vertikal, seperti yang dipilih oleh orientation atribut.

Dalam cuplikan berikut, gmp-advanced-place-details-compact dikonfigurasi dengan orientation yang ditetapkan ke horizontal. Atribut tambahan, atribut truncation-preferred, memotong konten tertentu agar pas dalam satu baris, bukan di-wrap. Elemen gmp-advanced-place-details-compact berisi elemen turunan, gmp-place-details-place-request, untuk memilih tempat. Elemen ini dapat 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 menyarangkan 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. Beberapa elemen ini dapat dikonfigurasi lebih lanjut menggunakan atribut khusus konten.

Lihat Penyesuaian Konten Widget Tempat dokumentasi referensi 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 Ringkas, 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 piksel-300 piksel. Lebar kurang dari 160 piksel mungkin tidak ditampilkan dengan benar. Jangan menetapkan tinggi tetap.

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

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

Perhatikan bahwa jika elemen Detail Tempat Lanjutan Ringkas ditambahkan ke jendela info, gaya kustom harus diterapkan langsung ke elemen gmp-advanced-place-details-compact. Hal ini karena jendela info adalah bagian dari DOM bayangan 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;
}

Lihat contoh kode lengkap

TypeScript

// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details-compact')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;
async function init(): Promise<void> {
    // 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: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            event.stop();

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector(
    'gmp-advanced-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 && event.placeId) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.setAttribute(
                'place',
                `places/${event.placeId}`
            );
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.removeAttribute('place');
            console.log('No place was selected.');
        }
    });
}
void init();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"></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",
                v: "beta"
            });
        </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-advanced-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-advanced-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="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

            <gmp-place-name></gmp-place-name>
            <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-advanced-place-details-compact>
    </body>
</html>index.html

Fitur lanjutan

Menyesuaikan tombol tindakan

Tambahkan tombol tindakan sebagai turunan langsung dari komponen Detail Tempat Lanjutan komponen. 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-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 bahwa tombol tindakan kustom akan membagikan informasi pengguna kepada pihak ketiga selain Google. Lihat persyaratan atribusi visual.

Menghilangkan nama Tempat

Untuk menghilangkan nama tempat, kecualikan elemen <gmp-place-name> secara eksplisit 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 yang diberikan 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);
});

Elemen Detail Tempat Lanjutan (pratinjau) Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Elemen Detail Tempat Lanjutan (pratinjau)

Mengonfigurasi konten

Mengonfigurasi tampilan

Lihat contoh kode lengkap

TypeScript

JavaScript

CSS

HTML

Elemen Detail Tempat Lanjutan Ringkas (pratinjau)

Mengonfigurasi konten

Mengonfigurasi tampilan

Lihat contoh kode lengkap

TypeScript

JavaScript

CSS

HTML

Fitur lanjutan

Menyesuaikan tombol tindakan

Persyaratan atribusi visual

Menghilangkan nama Tempat

Memfilter ulasan dan media

Elemen Detail Tempat Lanjutan (pratinjau)