Élément Place Autocomplete de base

Sélectionnez une plate-forme : Android iOS JavaScript

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.

Configurer l'élément "Place Request"

Ajoutez un écouteur pour mettre à jour l'élément Place Request lorsque l'utilisateur sélectionne une prédiction : 

// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select', (event) => {
    // Reset marker and InfoWindow, and prepare the details element.
    placeDetailsParent.appendChild(placeDetailsElement);
    advancedMarkerElement.position = null;
    infoWindow.close();
    // Request details for the selected place.
    const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
    placeDetailsRequest.place = event.place.id;
});
index.js

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

JavaScript

const placeAutocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const placeDetailsElement = document.querySelector('gmp-place-details-compact');
const placeDetailsParent = placeDetailsElement.parentElement;
const mapDiv = document.getElementById('map-container');
const center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    // Asynchronously load required libraries from the Google Maps JS API.
    await google.maps.importLibrary('places');
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
    const { Map, InfoWindow } = await google.maps.importLibrary('maps');
    // Set the initial location bias for the autocomplete element.
    placeAutocompleteElement.locationBias = center;
    // Create the map object with specified options.
    const map = new Map(mapDiv, {
        zoom: 12,
        center: center,
        mapId: 'DEMO_MAP_ID',
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });
    // Create an advanced marker to show the location of a selected place.
    const advancedMarkerElement = new AdvancedMarkerElement({
        map: map,
    });
    // Create an InfoWindow to hold the place details component.
    const infoWindow = new InfoWindow({
        minWidth: 360,
        disableAutoPan: true,
        closeButton: false,
        headerDisabled: true,
        pixelOffset: new google.maps.Size(0, -10),
    });
    // Event listener for when a place is selected from the autocomplete list.
    placeAutocompleteElement.addEventListener('gmp-select', (event) => {
        // Reset marker and InfoWindow, and prepare the details element.
        placeDetailsParent.appendChild(placeDetailsElement);
        advancedMarkerElement.position = null;
        infoWindow.close();
        // Request details for the selected place.
        const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Event listener for when the place details have finished loading.
    placeDetailsElement.addEventListener('gmp-load', () => {
        const location = placeDetailsElement.place.location;
        // Position the marker and open the InfoWindow at the place's location.
        advancedMarkerElement.position = location;
        infoWindow.setContent(placeDetailsElement);
        infoWindow.open({
            map,
            anchor: advancedMarkerElement,
        });
        map.setCenter(location);
        placeDetailsElement.focus();
    });
    // Event listener to close the InfoWindow when the map is clicked.
    map.addListener('click', () => {
        infoWindow.close();
        advancedMarkerElement.position = null;
    });
    // Event listener for when the map finishes moving (panning or zooming).
    map.addListener('idle', () => {
        const newCenter = map.getCenter();
        // Update the autocomplete's location bias to a 10km radius around the new map center.
        placeAutocompleteElement.locationBias = new google.maps.Circle({
            center: {
                lat: newCenter.lat(),
                lng: newCenter.lng(),
            },
            radius: 10000, // 10km in meters
        });
    });
}
initMap();
index.js

CSS

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

#map-container {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 50px;
  width: 500px;
  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;
  min-width: 300px;
  max-height: 300px;
  border: none;
  background-color: #ffffff;
  color-scheme: light;
}


style.css

HTML

<html>
  <head>
    <title>Basic 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"></div>
    <gmp-basic-place-autocomplete
      slot="control-inline-start-block-start"
    ></gmp-basic-place-autocomplete>
    <gmp-place-details-compact orientation="horizontal">
      <gmp-place-details-place-request></gmp-place-details-place-request>
      <gmp-place-standard-content></gmp-place-standard-content>
    </gmp-place-details-compact>

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