Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

Autocomplete pour les adresses et les termes de recherche

Introduction

Autocomplete est un composant de la bibliothèque Places dans Google Maps JavaScript API. Vous pouvez utiliser Autocomplete (fonction de saisie semi-automatique) pour reproduire dans votre application le comportement de frappe anticipée qu'utilise le champ de recherche de Google Maps. Lorsqu'un utilisateur commence à saisir une adresse, la fonction de saisie semi-automatique affiche automatiquement le reste de l'adresse.

Premiers pas

Avant d'utiliser la bibliothèque Places dans Google Maps JavaScript API, assurez-vous d'abord que Google Places API Web Service est activé dans Google API Console, dans le même projet que vous avez configuré pour Google Maps JavaScript API.

Pour afficher la liste des API activées :

  1. Allez à la Google API Console.
  2. Cliquez sur le bouton Select a project, sélectionnez le projet que vous avez configuré pour Google Maps JavaScript API et cliquez sur Open.
  3. Recherchez Google Places API Web Service dans la liste des API affichées dans le Dashboard.
  4. Si vous trouvez l'API dans la liste, vous pouvez continuer. Si l'API ne figure pas dans la liste, vous devez l'activer :
    1. En haut de la page, sélectionnez ENABLE API pour afficher l'onglet Library. Vous pouvez également sélectionner Library dans le menu de gauche.
    2. Recherchez Google Places API Web Service, puis sélectionnez-la dans la liste des résultats.
    3. Sélectionnez ENABLE. Une fois le processus terminé, Google Places API Web Service apparaît dans la liste des API sur le Dashboard.

Charger la bibliothèque

Le service Places est une bibliothèque autonome, séparée du code Maps JavaScript API principal. Pour utiliser les fonctionnalités contenues dans cette bibliothèque, vous devez d'abord la charger en utilisant le paramètre libraries dans l'URL bootstrap de Maps API :

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Pour plus d'informations, voir la présentation des bibliothèques.

Limites d'utilisation et politiques

Quotas

Google Places API Web Service et le service Place Autocomplete partagent un quota d'utilisation, tel que décrit dans la documentation sur les limites d'utilisation de Google Places API Web Service. Ces limites d'utilisation s'appliquent également lors de l'utilisation de Places Library in the Google Maps JavaScript API. L'utilisation journalière est calculée en additionnant les requêtes côté client et les requêtes côté serveur.

Politiques

L'utilisation de Places Library in the Google Maps JavaScript API doit être conforme aux politiques de Google Places API Web Service.

Résumé des classes

L'API propose deux types de widgets de saisie semi-automatique, que vous pouvez ajouter respectivement via les classes Autocomplete et SearchBox. Vous pouvez par ailleurs utiliser la classe AutocompleteService pour récupérer par programmation les résultats de la saisie semi-automatique.

Voici un résumé des classes disponibles :

  • Autocomplete ajoute un champ de saisie de texte à votre page Web et surveille ce champ pour la saisie de caractères. À mesure que l'utilisateur saisit du texte, la saisie semi-automatique affiche des prédictions de lieu sous la forme d'une liste de sélection déroulante. Lorsque l'utilisateur sélectionne un lieu dans la liste, les informations sur le lieu sont renvoyées à l'objet de saisie semi-automatique et peuvent être récupérées par votre application. Voir les détails ci-dessous.
  • SearchBox ajoute un champ de saisie de texte à votre page Web, de manière assez semblable à la classe Autocomplete. Les différences sont les suivantes :
    • La principale différence réside dans les résultats qui s'affichent dans la liste de sélection. SearchBox fournit une liste étendue de prédictions, pouvant inclure des lieux (tels que définis par Google Places API) et des suggestions de termes de recherche. Par exemple, si l'utilisateur saisit « pizza à new », la liste de sélection peut proposer « pizza à New York, NY », ainsi que le nom de plusieurs pizzerias.
    • SearchBox offre moins d'options que la classe Autocomplete pour limiter la recherche. Dans la première, vous pouvez limiter la recherche à des valeurs LatLngBounds données. Dans la seconde, non seulement vous pouvez restreindre la rechercher à un pays en particulier et des types de lieux spécifiques, mais vous pouvez également définir des limites.
    Voir les détails ci-dessous.
  • Vous pouvez créer un objet AutocompleteService pour récupérer les prédictions par programmation. Appelez la méthode getPlacePredictions() pour récupérer les lieux correspondants, ou la méthode getQueryPredictions() pour récupérer les lieux correspondants plus des suggestions de termes de recherche. Remarque : AutocompleteService n'ajoute aucune commande d'interface utilisateur. À la place, la méthode ci-dessus renvoie un tableau d'objets de prédiction. Chaque objet de prédiction contient le texte de la prédiction ainsi que des informations de référence et des détails sur la manière dont les résultats correspondent à ce qu'a saisi l'utilisateur. Voir les détails ci-dessous.

Le reste de cette page fournit des exemples de cas d'utilisation et des détails sur l'utilisation des classes mentionnées plus haut.

Comment utiliser la saisie semi-automatique Autocomplete

Cette vidéo vous montre comment utiliser la fonction de saisie semi-automatique Autocomplete, avec notamment des démos et des échantillons de code.

Exemple : Saisie semi-automatique pour les formulaires d'adresse

Votre application inclut-elle un formulaire d'adresse, par exemple une adresse d'expédition pour une commande en ligne, une adresse de facturation d'achat par carte de crédit ou un formulaire de réservation de taxi ? Autocomplete peut aider les utilisateurs à renseigner les champs d'adresse.

La Figure 1 montre un champ de texte avec saisie semi-automatique et la liste de sélection des prédictions de lieux fournies à mesure que l'utilisateur saisit ses caractères de recherche :

Champ de texte avec saisie semi-automatique et liste de sélection des prédictions de lieux fournies à mesure que l'utilisateur saisit ses caractères de recherche.
Figure 1 : Champ de texte avec saisie semi-automatique et liste de sélection

Lorsque l'utilisateur sélectionne une adresse dans la liste de sélection, votre application peut remplir le formulaire d'adresse :

Formulaire d'adresse rempli.
Figure 2 : Formulaire d'adresse rempli

Voir un formulaire d'adresse en action : Voir l'exemple (places-autocomplete-addressform.html)

Lisez la suite pour savoir comment ajouter la saisie semi-automatique à votre page Web.

Exemple : Saisie semi-automatique pour les commandes relatives aux cartes

La saisie semi-automatique Autocomplete s'avère utile pour inviter les utilisateurs à saisir des informations dans le cadre d'une application de carte, comme illustré à la Figure 3 :

Champ de texte avec saisie semi-automatique montrant une recherche de ville partielle     et les lieux correspondants.
Figure 3 : Champ de texte avec saisie semi-automatique et liste de sélection

Le voir en action : Voir l'exemple (places-autocomplete-hotelsearch.html)

Lisez la suite pour savoir comment ajouter la saisie semi-automatique à votre page Web.

Ajouter la saisie semi-automatique pour les lieux et les adresses

Autocomplete crée un champ de saisie de texte sur votre page Web, fournit des prédictions de lieu dans une liste de sélection via l'interface utilisateur et renvoie les détails d'un lieu en réponse à une requête getPlace(). Chaque entrée dans la liste de sélection correspond à un lieu unique (tel que défini par Google Places API).

Le constructeur Autocomplete nécessite deux arguments :

  • Un élément input HTML de type text. Il s'agit du champ d'entrée que le service de saisie semi-automatique surveille et auquel il associe ses résultats.
  • Un argument options, qui peut contenir les propriétés suivantes :
    • Un tableau de types indiquant un type explicite ou un groupe de types, comme répertoriés dans les types pris en charge ci-dessous. Si aucun paramètre n'est spécifié, tous les types sont renvoyés. En règle générale, un seul type est autorisé. Vous pouvez toutefois combiner les types geocode et establishment, mais notez que les résultats sont identiques à ceux renvoyés lorsque vous ne spécifiez aucun type. Les types pris en charge sont les suivants :
      • geocode indique au service Places de ne renvoyer que des résultats de géocodage, plutôt que des professionnels.
      • address indique au service Places de ne renvoyer que les résultats de géocodage ayant une adresse précise.
      • establishment indique au service Places de ne renvoyer que les professionnels.
      • Le groupe de types (regions) indique au service Places de renvoyer tous les résultats correspondant aux types suivants :
        • locality
        • sublocality
        • postal_code
        • country
        • administrative_area1
        • administrative_area2
      • Le groupe de types (cities) indique au service Places de renvoyer les résultats correspondant soit au type locality, soit au type administrative_area3.
    • bounds est un objet google.maps.LatLngBounds spécifiant la zone dans laquelle rechercher des lieux. Les résultats sont orientés vers les lieux situés entre ces limites, mais n'y sont pas restreints.
    • componentRestrictions peut être utilisé pour limiter les résultats à des groupes spécifiques. Actuellement, vous pouvez utiliser le paramètre componentRestrictions pour appliquer un filtre par pays. Le pays doit être spécifié sous la forme d'un code pays à deux caractères conforme à la norme ISO 3166-1 Alpha-2.
    • placeIdOnly peut être utilisé pour indiquer au widget Autocomplete de récupérer uniquement des identifiants de lieu. Lorsque getPlace() est appelé sur l'objet Autocomplete, seules les propriétés place id, types et name sont définies dans le résultat PlaceResult disponible. Vous pouvez utiliser l'identifiant de lieu renvoyé lors de vos appels vers le service Places, Geocoding, Directions ou Distance Matrix.

Définir des orientations et des limites de zone de recherche pour Autocomplete

Vous pouvez orienter les résultats de la saisie semi-automatique pour privilégier un lieu ou une zone approximative. Plusieurs méthodes sont pour cela disponibles :

  • Définir des limites lors de la création de l'objet Autocomplete.
  • Modifier les limites d'un objet Autocomplete existant.
  • Définir les limites sur la fenêtre d'affichage de la carte.
  • Limiter la recherche à un pays en particulier.

Des informations détaillées sont fournies dans les sections ci-dessous.

Définir des limites au moment de la création de l'objet Autocomplete

L'exemple ci-dessous utilise les options bounds et types pour faire porter la recherche sur des professionnels de type « establishment » (établissement), en privilégiant ceux qui se trouvent dans la zone géographique spécifiée.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

Modifier les limites d'un objet Autocomplete existant

Appelez la méthode setBounds() pour modifier la zone de recherche sur un objet Autocomplete existant.

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

Voir l'exemple (places-autocomplete-addressform.html)

Définir les limites sur la fenêtre d'affichage de la carte

Utilisez la méthode bindTo() pour orienter les résultats sur la fenêtre d'affichage de la carte, même si celle-ci est modifiée.

autocomplete.bindTo('bounds', map);

Voir l'exemple (places-autocomplete.html)

Limiter la recherche à un pays en particulier

Utilisez l'option componentRestrictions pour limiter la recherche avec saisie semi-automatique à un pays en particulier. Le code suivant limite les résultats aux villes situées en France.

var input = document.getElementById('searchTextField');
var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

autocomplete = new google.maps.places.Autocomplete(input, options);

L'exemple suivant permet à l'utilisateur de choisir un pays, puis de limiter les résultats de la saisie semi-automatique à ce pays.

// Set the country restriction based on user input.
// Also center and zoom the map on the given country.
function setAutocompleteCountry() {
  var country = document.getElementById('country').value;
  if (country == 'all') {
    autocomplete.setComponentRestrictions([]);
    map.setCenter({lat: 15, lng: 0});
    map.setZoom(2);
  } else {
    autocomplete.setComponentRestrictions({'country': country});
    map.setCenter(countries[country].center);
    map.setZoom(countries[country].zoom);
  }
  clearResults();
  clearMarkers();
}

Voir l'exemple (places-autocomplete-hotelsearch.html)

Définir le texte de remplacement pour la saisie semi-automatique

Par défaut, le champ de texte créé par le service de saisie semi-automatique contient un texte de remplacement standard. Pour modifier ce texte, définissez l'attribut placeholder sur l'élément input :

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

Remarque : Le texte de remplacement par défaut est automatiquement localisé. Si vous spécifiez votre propre texte de remplacement, vous devez gérer sa localisation dans votre application. Pour plus d'informations sur comment Google Maps JavaScript API choisit la langue à utiliser, voir la documentation sur la localisation.

Obtenir des informations sur un lieu avec la saisie semi-automatique

Lorsqu'un utilisateur sélectionne un lieu dans les prédictions jointes au champ de texte avec saisie semi-automatique, le service déclenche un événement place_changed. Vous pouvez appeler la méthode getPlace() sur l'objet Autocomplete pour récupérer un objet PlaceResult.

Par défaut, la saisie semi-automatique affiche alors l'adresse complète sous la forme d'une seule ligne de texte. Pour un formulaire d'adresse, il peut s'avérer utile d'obtenir l'adresse dans un format structuré. Vous pouvez utiliser la méthode Autocomplete.getPlace() afin de récupérer les détails complets de chaque prédiction de la saisie semi-automatique, y compris les adresses structurées.

Si vous utilisez l'option placeIdOnly, l'objet Autocomplete n'obtiendra pas de détails sur le lieu, car seules les propriétés place_id, types et name sont définies pour l'objet PlaceResult.

Pour obtenir les détails d'un lieu, récupérez un objet PlaceResult en appelant getPlace() sur l'objet Autocomplete lorsque vous obtenez l'événement place_changed. Vous pourriez ensuite utiliser le service Geocoding pour obtenir les coordonnées du lieu ou le service Places pour obtenir plus d'informations sur le lieu sélectionné.

Pour plus d'informations sur l'objet PlaceResult, reportez-vous à la documentation sur les résultats des requêtes de détails de lieu.

L'exemple suivant utilise la saisie semi-automatique pour renseigner les champs d'un formulaire d'adresse.

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

Voir l'exemple (places-autocomplete-addressform.html)

L'objet SearchBox permet aux utilisateurs d'effectuer une recherche géographique basée sur du texte, comme « pizza à New York » ou « magasin de chaussures près de robson street ». Vous pouvez associer l'objet SearchBox à un champ de texte. À mesure que l'utilisateur saisit son texte, le service renvoie des prédictions sous la forme d'une liste de sélection déroulante.

SearchBox fournit une liste étendue de prédictions, pouvant inclure des lieux (tels que définis par Google Places API) et des suggestions de termes de recherche. Par exemple, si l'utilisateur saisit « pizza à new », la liste de sélection peut proposer « pizza à New York, NY », ainsi que le nom de plusieurs pizzerias. Lorsqu'un utilisateur sélectionne un lieu dans la liste, les informations sur ce lieu sont renvoyées à l'objet SearchBox et peuvent être récupérées par votre application.

Le constructeur SearchBox nécessite deux arguments :

  • Un élément input HTML de type text. Il s'agit du champ d'entrée que le service SearchBox surveille et auquel il associe ses résultats.
  • Un argument options pouvant contenir la propriété bounds : Bounds est un objet google.maps.LatLngBounds spécifiant la zone dans laquelle rechercher des lieux. Les résultats sont orientés vers les lieux situés entre ces limites, mais n'y sont pas restreints.

Le code suivant utilise les paramètres bounds pour axer les résultats sur des lieux situés dans une zone géographique spécifique définie via ses coordonnées de latitude/longitude.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

Changer la zone de recherche pour le champ de recherche SearchBox

Afin de changer la zone de recherche pour un objet SearchBox existant, appelez la méthode setBounds() sur l'objet SearchBox et transmettez l'objet LatLngBounds pertinent.

Voir l'exemple (places-searchbox.html)

Obtenir les informations du champ de recherche SearchBox

Lorsque l'utilisateur sélectionne un élément dans les prédictions jointes au champ de recherche, le service déclenche un événement places_changed. Vous pouvez appeler la méthode getPlaces() sur l'objet SearchBox afin de récupérer un tableau contenant plusieurs prédictions, chacune étant un objet PlaceResult.

Pour plus d'informations sur l'objet PlaceResult, reportez-vous à la documentation sur les résultats des requêtes de détails de lieu.

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    var icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location
    }));

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

Voir l'exemple (places-searchbox.html)

Styliser les widgets Autocomplete et SearchBox

Par défaut, les éléments d'interface utilisateur fournis par Autocomplete et SearchBox sont stylisés pour une inclusion dans une carte Google. Vous pouvez choisir d'adapter ce style à votre propre site. Les classes CSS suivantes sont disponibles : Toutes les classes suivantes s'appliquent à la fois au widget Autocomplete et au widget SearchBox.

Illustration graphique des classes CSS pour les widgets Autocomplete et        SearchBox
Classes CSS pour les widgets Autocomplete et SearchBox
Classe CSS Description
pac-container Élément visuel contenant la liste des prédictions renvoyées par le service Place Autocomplete. Cette liste s'affiche sous la forme d'une liste déroulante sous le widget Autocomplete ou SearchBox.
pac-icon Icône affichée à gauche de chaque élément dans la liste des prédictions.
pac-item Élément de la liste de prédictions fournie par le widget Autocomplete ou SearchBox.
pac-item:hover Élément qui s'affiche lorsque l'utilisateur le survole avec le pointeur de sa souris.
pac-item-selected Élément que l'utilisateur sélectionne au moyen du clavier. Remarque : Les éléments sélectionnés seront membres de cette classe et de la classe pac-item.
pac-item-query Intervalle qui, au sein d'un élément pac-item, constitue la partie principale de la prédiction. Pour les points géographiques, cet élément contient le nom du lieu, par exemple « Sydney », ou le nom d'une rue et un numéro, comme « 10 King Street ». Pour les recherches textuelles comme « pizza à New York », il contient le texte complet de la requête. Par défaut, l'élément pac-item-query est coloré en noir. En cas de texte additionnel dans l'élément pac-item, il se trouve à l'extérieur de l'élément pac-item-query et hérite son style de pac-item. Par défaut, il apparait en gris. Le texte additionnel est généralement une adresse.
pac-matched Partie de la prédiction renvoyée qui correspond à ce qu'a saisi l'utilisateur. Par défaut, le texte correspondant apparaît en gras. Notez que le texte correspondant peut apparaître n'importe où dans l'élément pac-item. Il ne fait pas nécessairement partie de l'élément pac-item-query et peut se situer partiellement dans l'élément pac-item-query et partiellement dans le texte restant de l'élément pac-item.

Récupérer les prédictions du service de saisie semi-automatique

Pour récupérer les prédictions par programmation, utilisez la classe AutocompleteService. AutocompleteService n'ajoute aucune commande d'interface utilisateur. Il renvoie à la place un tableau d'objets de prédiction contenant chacun le texte de la prédiction ainsi que des informations de référence et des détails sur la manière dont les résultats correspondent à ce qu'a saisi l'utilisateur. Cela s'avère utile si vous souhaitez avoir un meilleur contrôle de l'interface utilisateur que ce que peuvent proposer les widgets Autocomplete et SearchBox décrits plus haut.

AutocompleteService utilise les méthodes suivantes :

  • getPlacePredictions() renvoie des prédictions de lieux. Remarque : Tel que défini par Places API, un « lieu » peut être un établissement, un point géographique ou un point d'intérêt.
  • getQueryPredictions() renvoie une liste étendue de prédictions, pouvant inclure des lieux (tels que définis par Places API) et des suggestions de termes de recherche. Par exemple, si l'utilisateur saisit « pizza à new », la liste de sélection peut proposer « pizza à New York, NY », ainsi que le nom de plusieurs pizzerias.

Chacune des deux méthodes ci-dessus renvoie un tableau de cinq objets de prédiction sous la forme suivante :

  • description désigne la prédiction correspondante.
  • id contient un identifiant unique correspondant au lieu. Cet identifiant peut ne pas être utilisé pour extraire des informations sur ce lieu, mais pour regrouper des données qui lui sont associées et en vérifier l'identité dans plusieurs recherches séparées. Dans la mesure où les identifiants sont susceptibles de changer, il est recommandé de comparer l'identifiant conservé pour un lieu à l'identifiant renvoyé dans les requêtes de détails ultérieures pour ce même lieu, et d'apporter les modifications nécessaires, le cas échéant. Remarque : La propriété id est progressivement abandonnée au profit de place_id, tel que décrit dans l'avis lié à l'abandon sur cette page.
  • matched_substrings contient un ensemble de sous-chaînes dans la description qui correspond aux éléments contenus dans ce qu'a saisi l'utilisateur. Cela peut s'avérer utile pour mettre en avant ces sous-chaînes dans votre application. Dans de nombreux cas, la requête apparaîtra en tant que sous-chaîne du champ de description.
    • length désigne la longueur de la sous-chaîne.
    • offset désigne le décalage des caractères, mesuré depuis le début de la chaîne de description, où la sous-chaîne correspondante apparaît.
  • place_id est un identifiant texte qui identifie un lieu de façon unique. Pour extraire des informations sur le lieu, indiquez cet identifiant dans le champ placeId d'une requête de détails sur un lieu. En savoir plus sur comment référencer un lieu avec un identifiant de lieu.
  • reference contient un jeton pouvant être utilisé pour interroger le service Details (recherche de détails) ultérieurement. Ce jeton peut différer de la référence utilisée dans la requête envoyée au service Details (recherche de détails). Il est recommandé de mettre à jour régulièrement les références stockées pour les lieux. Même si ce jeton identifie le lieu de manière unique, l'inverse n'est pas vrai. Un lieu peut être associé à plusieurs jetons de référence valides. Remarque : La propriété reference est progressivement abandonnée au profit de place_id, tel que décrit dans l'avis lié à l'abandon sur cette page.
  • terms désigne un tableau contenant les éléments de la requête. Pour un lieu, chaque élément constitue généralement une partie de l'adresse.
    • offset désigne le décalage des caractères, mesuré à partir du début de la chaîne descriptive, auquel la sous-chaîne correspondante apparaît.
    • value désigne le terme correspondant.

L'exemple ci-dessous exécute une demande de prédiction de requête pour les termes « pizza near » (pizza près de) et affiche les résultats dans une liste.

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}
<div id="right-panel">
  <p>Query suggestions for 'pizza near Syd':</p>
  <ul id="results"></ul>
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initService"
    async defer></script>
// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}

Voir l'exemple (places-queryprediction.html)

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.