Elementi di Place Details avanzati

Seleziona il componente giusto per il tuo caso d'uso:

• L'elemento Place Details mostra dettagli come l'orario di apertura, il sito web e le recensioni di un luogo selezionato. Viene fatturato nel livello Essentials.
• Advanced Place Details Element estende Place Details Element, consentendoti di configurare i pulsanti di azione e di applicare opzioni di ricerca e filtro alle recensioni e ai contenuti multimediali. Viene fatturato nel livello Pro.

L'elemento Advanced Place Details e l'elemento Advanced Place Details Compact sono elementi HTML che mostrano i dettagli di un luogo:

• La AdvancedPlaceDetailsElement supporta tutti i dati dei luoghi visualizzabili e può includere più foto.
• La AdvancedPlaceDetailsCompactElement è progettata per occupare uno spazio minimo e mostrare un insieme conciso di informazioni su un luogo, tra cui nome, indirizzo, valutazione e così via. Può anche includere una singola foto.

Sia l'elemento Place Details avanzato che l'elemento Place Details compatto avanzato offrono le stesse funzionalità avanzate, tra cui la personalizzazione dei pulsanti di azione, l'omissione del nome del luogo e il filtro di recensioni e contenuti multimediali.

Utilizza lo strumento di personalizzazione per visualizzare l'impatto di diversi insiemi di proprietà sull'aspetto di un elemento Place Details e accedi al codice in HTML/CSS, Kotlin/XML e Swift.

Elemento Place Details avanzato

Fai clic su un indicatore sulla mappa per visualizzare i dettagli del luogo in un elemento Place Details avanzato.

AdvancedPlaceDetailsElement supporta un'ampia gamma di elementi dei contenuti, tra cui l'orario di apertura completo, il sito web, il numero di telefono, il riepilogo basato sull'AI con fallback al riepilogo editoriale, i punti salienti specifici del tipo, le recensioni, il riepilogo delle recensioni basato sull'AI, il Plus Code e gli elenchi di funzionalità.

Per visualizzare i Place Details su una mappa, aggiungi un elemento gmp-advanced-place-details all'elemento gmp-map nella pagina HTML. Includi un elemento secondario, gmp-place-details-place-request, per selezionare il luogo. Può essere un oggetto Place, un ID luogo o il nome della risorsa di un luogo:

<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>

Suggerimento: puoi trovare l'ID luogo di un luogo specifico utilizzando lo strumento di ricerca ID luogo.

Configura i contenuti

Puoi controllare i contenuti specifici del luogo visualizzati dall'elemento gmp-advanced-place-details nidificando gli elementi secondari per selezionare e configurare i dettagli del luogo, come mostrato in questo esempio:

        <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>

Ogni elemento secondario dei contenuti seleziona un dettaglio del luogo corrispondente da visualizzare: gmp-place-address seleziona l'indirizzo del luogo, gmp-place-price seleziona il livello di prezzo del luogo e così via. Gli elementi gmp-place-summary e gmp-place-review-summary forniscono rispettivamente un riepilogo basato sull'AI del luogo e delle relative recensioni. L'ordine degli elementi secondari è irrilevante, poiché i dettagli selezionati vengono sempre visualizzati in un ordine predefinito fisso.

Alcuni di questi elementi possono essere ulteriormente configurati utilizzando attributi specifici per i contenuti:

• L'elemento gmp-place-media viene utilizzato per visualizzare una singola foto e include un attributo lightbox-preferred che apre la foto in un lightbox quando viene selezionata. Lightbox è disattivato per impostazione predefinita.
• L'elemento gmp-place-attribution viene utilizzato per visualizzare le configurazioni generali di attribuzione dei dati dell'API di Google Maps, ad esempio l'origine di una foto o di una recensione. Gli attributi light-scheme-color e dark-scheme-color vengono utilizzati per impostare il colore del testo dell'attribuzione in modalità Luce e modalità Buio.

Per saperne di più su tutti gli elementi dei contenuti supportati, consulta la documentazione di riferimento sulla personalizzazione dei contenuti dei Place Widget.

Per semplicità, puoi anche utilizzare gmp-place-all-content per mostrare tutti i dettagli disponibili nell'elemento Place Details avanzato o con gmp-place-standard-content per visualizzare una configurazione standard.

Configura l'aspetto

L'intervallo di larghezza consigliato per l'elemento gmp-advanced-place-details è 250px-400px. Le larghezze inferiori a 250 px potrebbero non essere visualizzate correttamente. Imposta l'altezza in base alla tua applicazione. L'elemento Advanced Place Details è progettato per scorrere all'interno dello spazio assegnato, se necessario.

L'elemento gmp-advanced-place-details supporta anche una serie di proprietà CSS personalizzate per configurare i colori e i caratteri dell'elemento. Per maggiori dettagli, consulta Stile personalizzato del Places UI Kit.

Importante: quando apporti modifiche visive, devi rispettare i requisiti di attribuzione.

Visualizza un esempio di codice completo

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

Nota: leggi la guida sull'utilizzo di TypeScript e Google Maps.

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

Elemento compatto Advanced Place Details

Fai clic su un indicatore sulla mappa per visualizzare i dettagli del luogo in un elemento compatto Place Details avanzato.

Il componente AdvancedPlaceDetailsCompactElement esegue il rendering dei dettagli di un luogo selezionato utilizzando uno spazio minimo. Questo può essere utile in una finestra informativa che mette in evidenza un luogo su una mappa, in un'esperienza sui social media come la condivisione di una posizione in una chat, come suggerimento per selezionare la tua posizione attuale o all'interno di un articolo multimediale per fare riferimento al luogo su Google Maps. AdvancedPlaceDetailsCompactElement può mostrare nome visualizzato, indirizzo, valutazione, tipo, prezzo, icona di accessibilità, stato di apertura e una singola foto. Può essere visualizzato in orizzontale o in verticale, a seconda dell'attributo orientation selezionato.

Nello snippet seguente, gmp-advanced-place-details-compact è configurato con orientation impostato su horizontal. Un attributo aggiuntivo, truncation-preferred, tronca determinati contenuti per adattarli a una riga anziché andare a capo. L'elemento gmp-advanced-place-details-compact contiene un elemento secondario, gmp-place-details-place-request, per selezionare il luogo. Può essere un oggetto Place, un ID luogo o il nome della risorsa di un luogo.

  <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>

Suggerimento: puoi trovare l'ID luogo di un luogo specifico utilizzando lo strumento di ricerca ID luogo.

Configura i contenuti

Puoi controllare i contenuti specifici del luogo visualizzati dall'elemento gmp-advanced-place-details-compact nidificando gli elementi secondari per selezionare e configurare i dettagli del luogo, come mostrato in questo snippet:

<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>

Ogni elemento secondario dei contenuti seleziona un dettaglio del luogo corrispondente da visualizzare. L'ordine degli elementi secondari è irrilevante, poiché i dettagli selezionati vengono sempre visualizzati in un ordine predefinito fisso. Alcuni di questi elementi possono essere ulteriormente configurati utilizzando attributi specifici dei contenuti.

Per saperne di più su tutti gli elementi dei contenuti supportati, consulta la documentazione di riferimento sulla personalizzazione dei contenuti dei Place Widget.

Per semplicità, puoi anche utilizzare gmp-place-all-content per mostrare tutti i dettagli disponibili nell'elemento Advanced Place Details Compact o con gmp-place-standard-content per visualizzare una configurazione standard.

Configura l'aspetto

L'intervallo di larghezza consigliato per l'elemento gmp-advanced-place-details-compact con orientamento verticale è compreso tra 180 px e 300 px. Le larghezze inferiori a 160 px potrebbero non essere visualizzate correttamente. Non impostare un'altezza fissa.

L'intervallo di larghezza consigliato per l'elemento gmp-advanced-place-details-compact con orientamento orizzontale è 180 px-500 px. Le larghezze inferiori a 160 px potrebbero non essere visualizzate correttamente. Se la larghezza è inferiore a 350 px, l'immagine in miniatura non verrà mostrata. Non impostare un'altezza fissa.

L'elemento gmp-advanced-place-details-compact supporta anche una serie di proprietà CSS personalizzate per configurare i colori e i caratteri dell'elemento. Per maggiori dettagli, consulta Stile personalizzato del Places UI Kit.

Importante: quando apporti modifiche visive, devi rispettare i requisiti di attribuzione.

Tieni presente che se l'elemento Advanced Place Details Compact viene aggiunto a una finestra informativa, lo stile personalizzato deve essere applicato direttamente all'elemento gmp-advanced-place-details-compact. Questo perché la finestra informativa fa parte dello shadow DOM della mappa, pertanto gli stili CSS esterni non verranno applicati.

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;
}

Visualizza un esempio di codice completo

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

Nota: leggi la guida sull'utilizzo di TypeScript e Google Maps.

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

Funzionalità avanzate

Personalizza i pulsanti di azione

Aggiungi pulsanti di azione come elementi secondari diretti del componente Advanced Place Details. Utilizza <gmp-place-link> per i collegamenti di navigazione standard e specifica esplicitamente l'attributo action. Facoltativamente, puoi specificare l'attributo slot. Le azioni predefinite valide sono open-website, open-directions, open-map e call. Se l'attributo slot viene omesso, il valore predefinito è 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>

Requisiti di attribuzione visiva

Importante: devi chiarire agli utenti finali quando un pulsante di azione personalizzata condividerà le informazioni utente con una terza parte diversa da Google. Consulta i requisiti di attribuzione visiva.

Ometti il nome del luogo

Per omettere il nome del luogo, escludi esplicitamente l'elemento <gmp-place-name> dai tuoi contenuti personalizzati.

<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>

Filtra recensioni e contenuti multimediali

Questo esempio di codice mostra solo i contenuti multimediali e le recensioni che menzionano "caffè".

<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>

Puoi anche utilizzare JavaScript per recuperare il numero totale di elementi che corrispondono alla query di ricerca specificata leggendo le proprietà searchMediaCount e searchReviewsCount. Devi attendere l'evento gmp-load prima di accedere a queste proprietà.

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);
});