Elemento elenco di luoghi avanzato

AdvancedPlaceListElement è un elemento HTML che esegue il rendering di una raccolta di luoghi in un elenco in base ai relativi nomi delle risorse dei luoghi.

L'elemento Elenco di luoghi avanzato offre funzionalità avanzate, tra cui la personalizzazione dei pulsanti di azione, la configurazione dell'attribuzione dei luoghi e la gestione degli errori.

Utilizzo di base

Per utilizzare il componente, aggiungi un elemento <gmp-advanced-place-list> alla pagina e passa un elenco di nomi delle risorse dei luoghi separati da spazi tramite l'attributo places.

Visualizza un esempio di codice completo

TypeScript

async function init() {
    await google.maps.importLibrary('places');
    await customElements.whenDefined('gmp-advanced-place-list');
    const listElement = document.querySelector('gmp-advanced-place-list');

    if (listElement) {
        listElement.addEventListener('gmp-error', (e: Event) => {
            const customEvent = e as CustomEvent<{ errors?: unknown }>;
            console.error(
                'Failed to load places: ',
                customEvent.detail.errors ?? customEvent
            );
        });
    }
}

void init();

JavaScript

async function init() {
    await google.maps.importLibrary('places');
    await customElements.whenDefined('gmp-advanced-place-list');
    const listElement = document.querySelector('gmp-advanced-place-list');

    if (listElement) {
        listElement.addEventListener('gmp-error', (e) => {
            const customEvent = e;
            console.error(
                'Failed to load places: ',
                customEvent.detail.errors ?? customEvent
            );
        });
    }
}

void init();

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Roboto, Arial, sans-serif;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Advanced Place List</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <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>
        <gmp-advanced-place-list
            places="places/ChIJLU7jZClu5kcR4PcOOO6p3I0 places/ChIJrRMgU7ZhLxMRxAOFkC7I8Sg places/ChIJbf8C1yFxdDkR3n12P4DkKt0 places/ChIJPTacEpBQwokRKwIlDXelxkA places/ChIJVVVViV-abZERJxqgpA43EDo">
            <template slot="details-item">
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-media query="coffee"></gmp-place-media>
            </template>
        </gmp-advanced-place-list>
    </body>
</html>

Funzionalità avanzate

Personalizza i pulsanti di azione

Aggiungi i pulsanti di azione come elementi secondari all'interno dell'elemento <template slot="details-item"> del componente Elenco di luoghi avanzato. 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-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="details-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-list>

Configura l'attribuzione del luogo

Per configurare l'attribuzione visiva, aggiungi un elemento <gmp-place-attribution> 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. Deve essere aggiunto come elemento di pari livello diretto di <template>. Le attribuzioni posizionate all'interno dell'elemento <template> verranno ignorate. 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="details-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-list>

Gestisci gli errori

Puoi ascoltare l'evento gmp-error per gestire correttamente gli scenari in cui uno o più luoghi richiesti non vengono caricati. 

const listElement = document.querySelector('gmp-advanced-place-list');
listElement.addEventListener('gmp-error', (e) => {
  // e.detail.errors contains an array of failure objects with specific failed Resource Names
  console.error('Failed to load places: ', e.detail.errors);
});