Élément Place Search avancé (preview)

Le AdvancedPlaceSearchElement est un élément HTML qui affiche les résultats d'une recherche de lieu dans une liste. Il existe deux façons de configurer l'élément gmp-advanced-place-search :

La recherche à proximité et la recherche par texte offrent les mêmes fonctionnalités avancées, y compris la personnalisation des boutons d'action, le filtrage des avis et des contenus multimédias, la configuration de l'attribution de lieu, ainsi que la gestion de la sélection et des erreurs de lieu.

Requête de recherche à proximité

Sélectionnez un type de lieu dans le menu pour afficher les résultats de recherche à proximité pour ce type de lieu.

La recherche à proximité est principalement configurée pour effectuer une recherche par type de lieu et par zone, et les résultats peuvent être classés par distance ou par popularité à l'aide de la rankPreference propriété. Pour en savoir plus, consultez la documentation de référence de la PlaceNearbySearchRequestElement classe.

Cet exemple affiche l'élément Advanced Place Search en réponse à une recherche à proximité avec un type de lieu sélectionné par l'utilisateur. Il affiche également un AdvancedPlaceDetailsCompactElement pour le lieu sélectionné.

Pour ajouter l'élément Advanced Place Search à la carte, ajoutez un gmp-advanced-place-search élément avec un gmp-place-nearby-search-request élément imbriqué à la page 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'élément select permet à l'utilisateur de choisir un type de lieu dans le menu. Par souci de simplicité, seuls trois types de lieux sont répertoriés : restaurant, café, et borne de recharge VE. 

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

Lorsque l'utilisateur sélectionne un type de lieu dans le menu, l' gmp-place-nearby-search-request élément est mis à jour, et l' Advanced Place Search élément affiche les résultats.

Requête de recherche par texte

Saisissez un terme de recherche dans le champ de saisie, puis cliquez sur le bouton Rechercher pour obtenir une liste de lieux correspondant à ce terme.

La recherche par texte est principalement configurée pour effectuer une recherche à l'aide d'une requête textuelle et d'un lieu. Les résultats peuvent être affinés par niveau de prix, par note et par disponibilité. Les résultats peuvent également être classés par distance ou par popularité à l'aide de la rankPreference propriété. Pour en savoir plus, consultez la documentation de référence de la PlaceTextSearchRequestElement classe.

Cet exemple affiche l'élément Advanced Place Search en réponse à une saisie de texte de l'utilisateur. Il affiche également un AdvancedPlaceDetailsCompactElement pour le lieu sélectionné.

Pour ajouter l'élément Advanced Place Search à la carte, ajoutez un gmp-advanced-place-search élément avec un gmp-place-text-search-request élément imbriqué à la page 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'élément input permet à l'utilisateur de saisir du texte de recherche. 

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

Lorsque l'utilisateur clique sur le bouton Rechercher, la fonction de recherche est exécutée, l'élément gmp-place-text-search-request est mis à jour, et l'élément Advanced Place Search affiche les résultats.

Fonctionnalités avancées

Personnaliser les boutons d'action

Ajoutez des boutons d'action en tant qu'enfants dans l'élément <template slot="place-list-item"> du composant Advanced Place Search. Utilisez <gmp-place-link> pour les connexions de navigation standard et spécifiez explicitement l'attribut action. Vous pouvez éventuellement spécifier l'attribut slot. Les actions prédéfinies valides sont open-website, open-directions, open-map, et call. Si l'attribut slot est omis, la valeur par défaut est 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>

Filtrer les avis et les contenus multimédias

Cet exemple de code n'affiche que les contenus multimédias et les avis qui mentionnent "café".

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

Configurer l'attribution de lieu

Pour configurer l'attribution visuelle, ajoutez un <gmp-place-attribution> élément afin d'afficher les configurations d'attribution des données de l'API Maps, telles que la source d'une photo ou d'un avis. Il doit être ajouté en tant qu'élément frère direct de <template>. Les attributions placées dans l'élément <template> seront ignorées. 

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

Gérer la sélection et les erreurs de lieu

Lorsque l'attribut selectable est présent, vous pouvez écouter l'événement gmp-select pour récupérer le lieu sélectionné par l'utilisateur. Vous pouvez également écouter l'événement gmp-error pour gérer correctement les scénarios dans lesquels les données de lieu ne peuvent pas être récupérées. 

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