Elemento di Place Search avanzato (anteprima)

Il AdvancedPlaceSearchElement è un elemento HTML che esegue il rendering dei risultati di una ricerca di luoghi in un elenco. Esistono due modi per configurare l'elemento gmp-advanced-place-search:

Sia la ricerca nelle vicinanze sia la ricerca per testo offrono le stesse funzionalità avanzate, tra cui la personalizzazione dei pulsanti di azione, il filtraggio di recensioni e contenuti multimediali, la configurazione dell'attribuzione dei luoghi, e la gestione della selezione dei luoghi e degli errori.

Richiesta di ricerca nelle vicinanze

Seleziona un tipo di luogo dal menu per visualizzare i risultati di ricerca nelle vicinanze per quel tipo di luogo.

La ricerca nelle vicinanze è configurata principalmente per la ricerca per tipo di luogo e località, e i risultati possono essere classificati in base alla distanza o alla popolarità utilizzando la rankPreference proprietà. Per ulteriori dettagli, consulta la documentazione di riferimento della PlaceNearbySearchRequestElement classe.

Questo esempio esegue il rendering dell'elemento Advanced Place Search in risposta a una Nearby Search con un tipo di luogo selezionato dall'utente. Visualizza anche un AdvancedPlaceDetailsCompactElement per il luogo selezionato.

Per aggiungere l'elemento Place Search avanzato alla mappa, aggiungi un gmp-advanced-place-search elemento con un gmp-place-nearby-search-request elemento nidificato alla pagina HTML. 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

L'elemento select consente all'utente di scegliere un tipo di luogo da menu. Per semplicità, sono elencati solo tre tipi di luoghi: ristorante, bar, e stazione di ricarica EV. 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

Quando l'utente seleziona un tipo di luogo dal menu, l' gmp-place-nearby-search-request elemento viene aggiornato e l' elemento di ricerca di luoghi avanzata visualizza i risultati.

Richiesta di ricerca per testo

Inserisci un termine di ricerca nel campo di immissione e fai clic sul pulsante Cerca per visualizzare un elenco di luoghi che corrispondono al termine.

La ricerca per testo è configurata principalmente per la ricerca utilizzando una query di testo e località e i risultati possono essere perfezionati in base al livello di prezzo, alla valutazione e alla disponibilità di apertura. I risultati possono anche essere classificati in base alla distanza o alla popolarità utilizzando la rankPreference proprietà. Per ulteriori dettagli, consulta la documentazione di riferimento della classe PlaceTextSearchRequestElement.

Questo esempio esegue il rendering dell'elemento Place Search avanzato in risposta a un input di testo dell'utente. Visualizza anche un AdvancedPlaceDetailsCompactElement per il luogo selezionato.

Per aggiungere l'elemento Place Search avanzato alla mappa, aggiungi un gmp-advanced-place-search elemento con un gmp-place-text-search-request elemento nidificato alla pagina HTML. 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

L'elemento input consente all'utente di inserire il testo di ricerca. 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

Quando l'utente fa clic sul pulsante Cerca , viene eseguita la funzione di ricerca, l'elemento gmp-place-text-search-request viene aggiornato e l'elemento Advanced Place Search visualizza i risultati.

Funzionalità avanzate

Personalizza i pulsanti di azione

Aggiungi i pulsanti di azione come elementi secondari all'interno dell'elemento <template slot="place-list-item"> del componente di ricerca di luoghi avanzata. 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-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-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-search>

Filtra recensioni e contenuti multimediali

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

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

Configura l'attribuzione dei luoghi

Per configurare l'attribuzione visiva, aggiungi un <gmp-place-attribution> elemento per visualizzare le configurazioni di attribuzione dei dati dell'API Maps, come l'origine di una foto o di una recensione. Deve essere aggiunto come elemento pari livello diretto di <template>. Le attribuzioni inserite all'interno dell'elemento <template> verranno ignorate. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-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-search>

Gestisci la selezione dei luoghi e gli errori

Quando è presente l'attributo selectable, puoi ascoltare l'evento gmp-select per recuperare il luogo selezionato dall'utente. Puoi anche ascoltare l'evento gmp-error per gestire con garbo gli scenari in cui non è possibile recuperare i dati dei luoghi. 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});