Élément Place Autocomplete de base

Le BasicPlaceAutocompleteElement crée un champ de saisie de texte, fournit des prédictions de lieux dans une liste de sélection d'UI et renvoie un ID de lieu pour le lieu sélectionné.

Contrairement à PlaceAutocompleteElement, l'élément Place Autocomplete de base simplifié efface le champ de saisie lorsqu'un utilisateur sélectionne une prédiction de lieu. Il renvoie également un objet Place qui ne contient que l'ID de lieu, plutôt qu'un objet PlacePrediction. Utilisez cet ID de lieu avec un élément Détails du kit UI Places pour obtenir des informations supplémentaires sur le lieu.

Prérequis

Pour utiliser l'élément Basic Place Autocomplete, vous devez activer "Places UI Kit" dans votre projet Google Cloud. Pour en savoir plus, consultez Commencer.

Ajouter un élément Place Autocomplete de base

L'élément de saisie semi-automatique de base crée un champ de saisie de texte, fournit des prédictions de lieu dans une liste de sélection d'UI et renvoie un ID de lieu en réponse à une sélection de l'utilisateur à l'aide de l'événement gmp-select. Cette section vous explique comment ajouter un élément de saisie semi-automatique de base à une page Web ou à une carte.

Ajouter un élément de saisie semi-automatique de base à une page Web

Pour ajouter l'élément BasicAutocomplete à une page Web, créez un google.maps.places.BasicPlaceAutocompleteElement, puis ajoutez-le à la page comme illustré dans l'exemple suivant : 

  // Request needed libraries.
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary('places');
// Create the input HTML element, and append it.
const placeAutocomplete = new BasicPlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);

Ajouter un élément de saisie semi-automatique de base à une carte

Pour ajouter un élément de saisie semi-automatique de base à une carte, créez une instance BasicPlaceAutocompleteElement, ajoutez-la à un div, puis transférez-la sur la carte en tant que commande personnalisée, comme illustré dans l'exemple suivant :

  const placeAutocomplete = new google.maps.places.BasicPlaceAutocompleteElement();
  placeAutocomplete.id = 'place-autocomplete-input';
  placeAutocomplete.locationBias = center;
  const card = document.getElementById('place-autocomplete-card');
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

Limiter les prédictions de saisie semi-automatique

Par défaut, Basic Place Autocomplete présente tous les types de lieux, avec une pondération en faveur des prédictions de lieux proches de l'utilisateur. Définissez BasicPlaceAutocompleteElementOptions pour présenter des prédictions plus pertinentes en limitant ou en pondérant les résultats.

Si vous limitez les résultats, l'élément de saisie semi-automatique de base ignore tous les résultats en dehors de la zone de restriction. Une pratique courante consiste à limiter les résultats aux limites de la carte. Pondérer la saisie semi-automatique permet d'afficher les résultats dans la zone spécifiée. Toutefois, certaines correspondances peuvent se trouver en dehors de cette zone.

Si vous ne définissez pas de limite ni de fenêtre d'affichage de la carte, l'API tentera de détecter l'emplacement de l'utilisateur en fonction de son adresse IP et pondérera les résultats en conséquence. Lorsque c'est possible, définissez des limites. Sinon, les utilisateurs peuvent recevoir des prédictions différentes. De plus, pour améliorer les prédictions de manière générale, il est important de fournir une fenêtre d'affichage pertinente, telle que celle que vous définissez en faisant un panoramique ou un zoom sur la carte, ou une fenêtre d'affichage définie par le développeur en fonction de la position de l'appareil et du rayon. Si aucun rayon n'est disponible, un rayon de 5 km est considéré comme une valeur par défaut raisonnable pour l'élément Basic Place Autocomplete. Ne définissez pas une fenêtre d'affichage avec un rayon égal à zéro (un seul point), ni une fenêtre d'affichage qui n'inclut que quelques mètres (moins de 100 m) ou s'étend à tout le globe terrestre.

Restreindre la recherche de lieux par pays

Pour limiter la recherche de lieux à un ou plusieurs pays spécifiques, utilisez la propriété includedRegionCodes pour spécifier le ou les codes pays, comme indiqué dans l'extrait suivant :

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

Restreindre la recherche de lieux aux limites de la carte

Pour limiter la recherche de lieux aux limites d'une carte, utilisez la propriété locationRestrictions pour ajouter les limites, comme indiqué dans l'extrait suivant :

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

Lorsque vous restreignez la recherche aux limites de carte, veillez à ajouter un écouteur pour modifier les limites lorsqu'elles changent :

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

Pour supprimer le locationRestriction, définissez-le sur null.

Pondérer les résultats de recherche de lieu

Pour pondérer les résultats de recherche sur une zone circulaire, utilisez la propriété locationBias et transmettez un rayon, comme indiqué ci-dessous :

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

Pour supprimer le locationBias, définissez-le sur null.

Limiter les résultats de recherche de lieux à certains types

Pour limiter les résultats de recherche de lieux à certains types de lieux, utilisez la propriété includedPrimaryTypes et indiquez un ou plusieurs types, comme indiqué ci-dessous :

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

Pour obtenir la liste complète des types acceptés, consultez les tableaux A et B des types de lieux.

Obtenir des informations sur un lieu

Pour obtenir l'ID du lieu sélectionné, ajoutez un écouteur gmp-select au PlaceAutocompleteElement, comme indiqué dans l'exemple suivant : 

// Add the gmp-select listener, and display the results.
  placeAutocomplete.addEventListener('gmp-select', async ({ place }) => {
      await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
      selectedPlaceTitle.textContent = 'Selected Place:';
      selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
  });

Dans l'exemple précédent, l'écouteur d'événements renvoie un objet de classe Place. Appelez place.fetchFields() pour obtenir les champs de données Place Details nécessaires à votre application.

Dans l'exemple suivant, l'écouteur demande des informations de lieu et les affiche sur une carte.

  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener('gmp-select', async ({ place }) => {
      await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
      // If the place has a geometry, then present it on a map.
      if (place.viewport) {
          map.fitBounds(place.viewport);
      }
      else {
          map.setCenter(place.location);
          map.setZoom(17);
      }
      let content = '<div id="infowindow-content">' +
          '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
          '<span id="place-address">' + place.formattedAddress + '</span>' +
          '</div>';
      updateInfoWindow(content, place.location);
      marker.position = place.location;
  });

Cet exemple vous explique comment ajouter un élément Basic Autocomplete à une carte Google.

JavaScript

const mapContainer = document.getElementById("map-container");
const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const detailsElement = document.querySelector('gmp-place-details-compact');
const mapElement = document.querySelector('gmp-map');
const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    //@ts-ignore
    const { BasicPlaceAutocompleteElement, PlaceDetailsElement } = await google.maps.importLibrary('places');
    //@ts-ignore
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
    //@ts-ignore
    const { LatLngBounds } = await google.maps.importLibrary('core');
    // Set the initial map location and autocomplete location bias
    mapElement.center = center;
    autocompleteElement.locationBias = center;
    // Get the underlying google.maps.Map object to add listeners
    const map = mapElement.innerMap;
    // Add the listener tochange locationBias to locationRestriction when the map moves
    map.addListener('bounds_changed', () => {
        autocompleteElement.locationBias = null;
        autocompleteElement.locationRestriction = map.getBounds();
        console.log("bias changed to restriction");
    });
    // Add the listener to update the Place Request element when the user selects a prediction
    autocompleteElement.addEventListener('gmp-select', async (event) => {
        const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Add the listener to update the marker when the Details element loads
    detailsElement.addEventListener('gmp-load', async () => {
        const location = detailsElement.place.location;
        detailsElement.style.display = "block";
        advancedMarkerElement.position = location;
        advancedMarkerElement.content = detailsElement;
        if (detailsElement.place.viewport) {
            map.fitBounds(detailsElement.place.viewport);
        }
        else {
            map.setCenter(location);
            map.setZoom(17);
        }
    });
}
initMap();
index.js

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 50px;
  top: 10px;
  left: 10px;
  z-index: 1;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
  border-radius: 10px;
}

gmp-place-details-compact {
  width: 360px;
  max-height: 300px;
  border: none;
  padding: 0;
  margin: 0;
  position: absolute;
  transform: translate(calc(-180px), calc(-215px)); 
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}
style.css

HTML

<html>
  <head>
    <title>Place Autocomplete map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
   <div id="map-container">
      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
      <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
      </gmp-place-details-compact>
      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
         <gmp-advanced-marker></gmp-advanced-marker> 
      </gmp-map>
    </div>

    <!-- prettier-ignore -->
    <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

Essayer l'exemple