Elementi avanzati di Place Details (anteprima)

L'elemento Dettagli del luogo avanzati e l'elemento Dettagli del luogo avanzati compatti Element sono elementi HTML che mostrano i dettagli di un luogo:

Sia l'elemento Dettagli del luogo avanzati sia l'elemento Dettagli del luogo avanzati compatti offrono le stesse funzionalità avanzate, tra cui la personalizzazione dei pulsanti di azione, l'omissione del nome del luogo e il filtraggio di recensioni e contenuti multimediali.

Utilizza lo strumento di personalizzazione per visualizzare in che modo i diversi insiemi di proprietà influiscono sull'aspetto di un elemento Dettagli del luogo e accedere al codice in HTML/CSS, Kotlin/XML, e Swift.

Elemento Dettagli del luogo avanzati (anteprima)

Fai clic su un indicatore sulla mappa per visualizzare i dettagli del luogo in un elemento Dettagli del luogo avanzati.

Il AdvancedPlaceDetailsElement supporta un'ampia gamma di elementi di contenuti, tra cui orari di apertura completi, sito web, numero di telefono, riepilogo basato sull'AI con fallback al riepilogo editoriale, informazioni in evidenza specifiche per il tipo, recensioni, riepilogo delle recensioni basato sull'AI, oltre a elenchi di codice e funzionalità.

Per visualizzare i dettagli del luogo su una mappa, aggiungi un gmp-advanced-place-details elemento all' gmp-map elemento nella pagina HTML. Includi un elemento secondario, gmp-place-details-place-request, per selezionare il luogo. Può trattarsi di un oggetto Place, di un ID luogo o del 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>

Configurare i contenuti

Puoi controllare i contenuti specifici del luogo visualizzati dall' gmp-advanced-place-details elemento 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 di contenuti secondario 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 un riepilogo basato sull'AI del luogo e delle relative recensioni, rispettivamente. L'ordine degli elementi secondari non è importante, 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: attributi:

  • L' gmp-place-media elemento viene utilizzato per visualizzare una singola foto e include un lightbox-preferred attributo che apre la foto in una lightbox quando viene fatto clic. La lightbox è disattivata per impostazione predefinita.
  • L'elemento gmp-place-attribution viene utilizzato per visualizzare le configurazioni 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à chiara e scura.

Per ulteriori informazioni su tutti gli elementi di contenuti supportati, consulta la documentazione di riferimento Personalizzazione dei contenuti del widget Luogo.

Per semplificare, puoi anche utilizzare gmp-place-all-content per mostrare tutti i dettagli disponibili nell'elemento Dettagli del luogo avanzati oppure con gmp-place-standard-content per visualizzare una configurazione standard.

Configurare l'aspetto

L'intervallo di larghezza consigliato per l' gmp-advanced-place-details elemento è 250-400 px. Le larghezze inferiori a 250 px potrebbero non essere visualizzate correttamente. Imposta l'altezza in base alla tua applicazione. L'elemento Dettagli del luogo avanzati è progettato per scorrere nello spazio assegnato in base alle esigenze.

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 Stili personalizzati del kit UI di Places.

Elemento Dettagli del luogo avanzati compatti (anteprima)

Fai clic su un indicatore sulla mappa per visualizzare i dettagli del luogo in un elemento Dettagli del luogo avanzati compatti.

Il AdvancedPlaceDetailsCompactElement mostra i dettagli di un luogo selezionato utilizzando uno spazio minimo. Può essere utile in una finestra informativa che mette in evidenza un luogo su una mappa, in un'esperienza di social media come la condivisione di una località 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. Il AdvancedPlaceDetailsCompactElement può mostrare nome, indirizzo, valutazione, tipo, prezzo, icona di accessibilità, stato di apertura e una singola foto. Può essere visualizzato orizzontalmente o verticalmente, come selezionato dall' orientation attributo.

Nel seguente snippet, 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ò trattarsi di un oggetto Place, di un ID luogo o del 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>

Configurare 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 di contenuti secondario seleziona un dettaglio del luogo corrispondente da visualizzare. L'ordine degli elementi secondari non è importante, 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.

Per ulteriori informazioni su tutti gli elementi di contenuti supportati, consulta la documentazione di riferimento Personalizzazione dei contenuti del widget Luogo.

Per semplicità, puoi anche utilizzare gmp-place-all-content per mostrare tutti i dettagli disponibili nell'elemento Dettagli del luogo avanzati compatti oppure gmp-place-standard-content per visualizzare una configurazione standard.

Configurare l'aspetto

L'intervallo di larghezza consigliato per l' gmp-advanced-place-details-compact elemento con orientamento verticale è 180-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' gmp-advanced-place-details-compact elemento con orientamento orizzontale è 180-500 px. Le larghezze inferiori a 160 px potrebbero non essere visualizzate correttamente. Con larghezze inferiori a 350 px, l'immagine miniatura non verrà mostrata. Non impostare un'altezza fissa.

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

Tieni presente che se l'elemento Dettagli del luogo avanzati compatti viene aggiunto a un finestra informativa, lo stile personalizzato deve essere applicato direttamente all' gmp-advanced-place-details-compact elemento. Questo perché la finestra informativa fa parte del DOM ombra della mappa, quindi 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;
}

Questo esempio mostra come aggiungere un AdvancedPlaceDetailsCompactElement a una mappa a livello di programmazione utilizzando un InfoWindow e un AdvancedMarkerElement.

Funzionalità avanzate

Personalizzare i pulsanti di azione

Aggiungi i pulsanti di azione come elementi secondari diretti del componente Dettagli del luogo avanzati componente. Utilizza <gmp-place-link> per le connessioni di navigazione standard e specifica in modo esplicito l'attributo action. Puoi anche 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 indicare chiaramente agli utenti finali quando un pulsante di azione personalizzato condividerà le informazioni dell'utente con una terza parte diversa da Google. Consulta i requisiti di attribuzione visiva.

Omettere il nome del luogo

Per omettere il nome del luogo, escludi in modo esplicito l' <gmp-place-name> dai 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>

Filtrare 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 searchMediaCount e searchReviewsCount proprietà. 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);
});