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

Service Geocoding

Présentation

Le géocodage est le processus qui permet de convertir des adresses (comme « 1600 Amphitheatre Parkway, Mountain View, CA ») en coordonnées géographiques (comme latitude 37.423021 et longitude -122.083739), que vous pouvez ensuite utiliser pour placer des marqueurs ou positionner la carte.

Le géocodage inversé est le processus de conversion de coordonnées géographiques en adresses lisibles. Le géocodeur inversé vous permet également de retrouver l'adresse correspondant à un identifiant de lieu donné.

Google Maps JavaScript API fournit une classe de géocodeur qui permet d'effectuer le géocodage et le géocodage inversé de manière dynamique, à partir des informations saisies par l'utilisateur. Si vous préférez géocoder des adresses statiques connues, voir le service Web de géocodage.

Premiers pas

Avant d'utiliser le service Geocoding dans Google Maps JavaScript API, assurez-vous que Google Maps Geocoding API est activée dans la Google API Console, dans le 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 Maps Geocoding API 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 Maps Geocoding API, puis sélectionnez-la dans la liste des résultats.
    3. Sélectionnez ENABLE. Une fois le processus terminé, Google Maps Geocoding API apparaît dans la liste des API sur le Dashboard.

Limites d'utilisation et politiques

Quotas

Le service Geocoding est soumis aux limites d'utilisation suivantes :

Utilisation du service Geocoding avec le plan Standard

  • 2 500 requêtes gratuites par jour (en additionnant les requêtes côté client et côté serveur). activer la facturation pour bénéficier de quotas journaliers supérieurs, facturés à 0,50 USD / 1 000 requêtes supplémentaires, jusqu'à 100 000 requêtes par jour.
  • 50 requêtes par seconde (en additionnant les requêtes côté client et côté serveur).

Utilisation du service Geocoding avec le plan Premium

  • Quota journalier gratuit partagé de 100 000 requêtes par tranche de 24 heures ; requêtes supplémentaires dans le cadre de l'achat annuel de crédits Maps API.
  • Illimité requêtes côté client par seconde et par projet. Notez que l'API côté serveur est limitée à 50 requêtes par seconde.

La limite du taux est appliquée par session utilisateur, indépendamment du nombre d'utilisateurs qui partagent le même projet.

La limite du taux par session évite que les services côté client soient utilisés pour des requêtes groupées, telles que le géocodage par lot. Pour les requêtes groupées, utilisez le service Web Google Maps Geocoding API.

Politiques

Le service Geocoding doit être utilisé conformément aux politiques de Google Maps Geocoding API.

Requêtes de géocodage

Google Maps API devant appeler un serveur externe, l'accès au service de géocodage est asynchrone. Pour cette raison, vous devez définir une méthode de rappel à exécuter à la fin de la requête. Cette méthode de rappel traite le ou les résultats. Notez que le géocodeur peut renvoyer plusieurs résultats.

L'accès au service de géocodage Google Maps API se fait depuis votre code via l'objet google.maps.Geocoder. La méthode Geocoder.geocode() lance une requête au service de géocodage, en lui spécifiant un littéral objet GeocoderRequest contenant les termes d'entrée et une méthode de rappel à exécuter à la réception de la réponse.

Le littéral objet GeocoderRequest contient les champs suivants :

{
 address: string,
 location: LatLng,
 placeId: string,
 bounds: LatLngBounds,
 componentRestrictions: GeocoderComponentRestrictions,
 region: string
}

Paramètres obligatoires : Vous ne devez renseigner qu'un seul des champs suivants :

  • address — Adresse que vous souhaitez géocoder.
  • location — Valeur LatLng (ou LatLngLiteral) pour laquelle vous souhaitez obtenir l'adresse lisible la plus proche. Le géocodeur effectue un géocodage inversé. Pour plus d'informations, voir Géocodage inversé.
  • placeid — Identifiant du lieu pour lequel vous souhaitez obtenir l'adresse lisible la plus proche. L'identifiant de lieu est un identifiant unique qui peut être utilisé avec d'autres API Google. Par exemple, vous pouvez utiliser l'identifiant placeId renvoyé par Google Maps Roads API pour obtenir l'adresse d'un point affiché. Pour plus d'informations sur les identifiants de lieu, voir la présentation des identifiants de lieu. Si vous utilisez un identifiant placeId, le géocodeur effectue un géocodage inversé. Pour plus d'informations, reportez-vous à la section Géocodage inversé.

Paramètres facultatifs :

  • bounds — Zone délimitée par la latitude/longitude (LatLngBounds) que les résultats de géocodage doivent privilégier. Le paramètre bounds ne fera qu'influer sur les résultats du géocodeur, sans les limiter totalement. (Pour plus d'informations, voir Limiter les résultats à une fenêtre d'affichage ci-dessous.)
  • componentRestrictions — Utilisé pour limiter les résultats à une zone spécifique. (Pour plus d'informations, voir Filtrer par composants ci-dessous.)
  • region — Code de région, indiqué sous forme d'une balise secondaire region en langage IANA. Dans la plupart des cas, ces balises sont directement mappées sur des valeurs familières ccTLD (« domaine de premier niveau ») à deux caractères. Le paramètre region ne fera qu'influer sur les résultats du géocodeur, sans les limiter totalement. (Pour plus d'informations, voir Limiter les résultats à un code de région ci-dessous.)

Réponses aux requêtes de géocodage

Le service de géocodage nécessite une méthode de rappel à exécuter lors de la récupération des résultats du géocodeur. Ce rappel doit transmettre deux paramètres contenant le code results et un code status, dans cet ordre.

Résultats du géocodage

L'objet GeocoderResult représente un résultat de géocodage unique. Une requête de géocodage peut renvoyer plusieurs objets résultat :

results[]: {
 types[]: string,
 formatted_address: string,
 address_components[]: {
   short_name: string,
   long_name: string,
   postcode_localities[]: string,
   types[]: string
 },
 partial_match: boolean,
 place_id: string,
 postcode_localities[]: string,
 geometry: {
   location: LatLng,
   location_type: GeocoderLocationType
   viewport: LatLngBounds,
   bounds: LatLngBounds
 }
}

Ces champs sont décrits ci-dessous :

  • types[] est un tableau indiquant le type du résultat renvoyé. Ce tableau contient un ensemble de zéro, une ou plusieurs balises identifiant le type de caractéristique renvoyé dans le résultat. Par exemple, le géocode de Chicago renvoie « locality » qui indique que Chicago est une ville, et renvoie également « political » qui indique qu'il s'agit d'une entité politique.
  • formatted_address est une chaîne contenant une adresse lisible de ce lieu. Bien souvent, cette adresse équivaut à l'« adresse postale », laquelle diffère parfois d'un pays à l'autre. (Notez que certains pays, tels que la Grande-Bretagne, n'autorisent pas la distribution des vraies adresses postales en raison de restrictions de licence.) Cette adresse est généralement composée d'un ou plusieurs composants d'adresse. Par exemple, l'adresse « 111 8e Avenue, New York, NY » contient des composants d'adresse distincts pour « 111 8th Avenue » (le numéro et la rue), « New York » (la ville) et « NY » (l'État). Ces composants d'adresse sont indiqués ci-dessous. (Pour plus d'informations sur les types, voir Types ci-dessous.)
  • address_components[] est un tableau contenant les différents composants d'adresse, comme expliqué ci-dessus.
  • partial_match indique que le géocodeur n'a pas renvoyé de correspondance exacte pour la requête d'origine, mais qu'il a pu trouver une partie de l'adresse demandée. Nous vous recommandons d'examiner la requête d'origine pour vérifier qu'elle ne contient pas d'erreur de syntaxe et/ou que l'adresse est bien complète.

    Les correspondances partielles sont souvent renvoyées lorsque l'adresse postale n'existe pas dans la localité que vous avez indiquée dans la requête. Les correspondances partielles peuvent aussi être renvoyées lorsqu'une requête correspond à plusieurs lieux au sein de la même localité. Par exemple, « 21 Henr St, Bristol, UK » renvoie une correspondance partielle à la fois pour Henry Street et pour Henrietta Street. Notez que si une requête comprend un composant d'adresse mal saisi, le service de géocodage peut suggérer une autre adresse. Les suggestions déclenchées de cette façon sont également signalées comme des correspondances partielles.

  • place_id est l'identifiant unique d'un lieu et peut être utilisé avec d'autres API Google. Vous pouvez par exemple utiliser place_id avec la bibliothèque Google Places API pour obtenir des détails sur une entreprise locale, comme son numéro de téléphone, ses horaires d'ouverture, les avis des utilisateurs, etc. Voir la présentation des identifiants de lieu.
  • postcode_localities[] est un tableau représentant toutes les localités contenues dans un code postal. Ce composant est présent uniquement lorsque le résultat correspond à un code postal regroupant plusieurs localités.
  • geometry contient les informations suivantes :

    • location qui contient la valeur latitude,longitude géocodée. Notez que nous retournons ce lieu en tant qu'objet LatLng, pas en tant que chaîne formatée.
    • location_type qui stocke des données supplémentaires sur le lieu spécifié. Les valeurs suivantes sont actuellement prises en charge :

      • ROOFTOP indique que le résultat renvoyé correspond à un géocode précis.
      • RANGE_INTERPOLATED indique que le résultat renvoyé correspond à une approximation (généralement sur une route) interpolée entre deux points précis (tels que des intersections). Les résultats interpolés sont généralement renvoyés lorsque le géocodage rooftop est indisponible pour une adresse postale.
      • GEOMETRIC_CENTER indique que le résultat renvoyé est le centre géométrique d'un résultat, comme une polyligne (par exemple, une rue) ou d'un polygone (région).
      • APPROXIMATE indique que le résultat renvoyé est approximatif.

    • viewport stocke la fenêtre d'affichage recommandée pour le résultat renvoyé.
    • bounds (éventuellement renvoyé) stocke la zone délimitée par la latitude/longitude (LatLngBounds) pouvant contenir la totalité du résultat renvoyé. Notez que ces limites peuvent ne pas correspondre à la fenêtre d'affichage recommandée. (Par exemple, San Francisco inclut les Îles Farallon, qui techniquement font partie de la ville, mais ne devraient pas apparaître dans les résultats de la fenêtre d'affichage.)

Les adresses seront renvoyées par le géocodeur en utilisant le paramètre de langue défini pour le navigateur ou la langue spécifiée lors du chargement de l'API JavaScript au moyen du paramètre language. (Pour plus d'informations, voir Localisation.)

Types de composant d'adresse

Le tableau types[] dans le résultat renvoyé indique le type d'adresse. Ces types peuvent également être renvoyés dans les tableaux address_components[] pour indiquer le type d'un composant d'adresse spécifique. Dans le géocodeur, les adresses peuvent avoir différents types ; les types peuvent être considérés comme des « balises ». Par exemple, de nombreuses villes sont balisées avec les types political et locality.

Les types suivants sont pris en charge et renvoyés par le géocodeur HTTP :

  • street_address indique une adresse de rue précise.
  • route indique une route nommée (comme « US 101 »).
  • intersection indique une intersection majeure, généralement de deux routes principales.
  • political indique une entité politique. Habituellement, ce type indique un polygone de certaines administrations civiles.
  • country indique l'entité politique nationale et correspond généralement au type de premier ordre renvoyé par le géocodeur.
  • administrative_area_level_1 indique une entité civile de premier ordre en dessous du niveau du pays. Aux États-Unis, ces niveaux administratifs correspondent aux États. Toutes les nations ne possèdent pas ces niveaux administratifs.
  • administrative_area_level_2 indique une entité civile de deuxième ordre en dessous du niveau du pays. Aux États-Unis, ces niveaux administratifs correspondent aux comtés. Toutes les nations ne possèdent pas ces niveaux administratifs.
  • administrative_area_level_3 indique une entité civile de troisième ordre en dessous du niveau du pays. Ce type indique une division civile mineure. Toutes les nations ne possèdent pas ces niveaux administratifs.
  • administrative_area_level_4 indique une entité civile de quatrième ordre en dessous du niveau du pays. Ce type indique une division civile mineure. Toutes les nations ne possèdent pas ces niveaux administratifs.
  • administrative_area_level_5 indique une entité civile de cinquième ordre en dessous du niveau du pays. Ce type indique une division civile mineure. Toutes les nations ne possèdent pas ces niveaux administratifs.
  • colloquial_area indique un autre nom couramment utilisé pour l'entité.
  • locality indique une entité politique de ville ou de municipalité incorporée.
  • sublocality indique une entité civile de premier ordre en dessous de la localité. Certains lieux peuvent recevoir l'un des types supplémentaires suivants : de sublocality_level_1 à sublocality_level_5. Chaque niveau de sous-localité correspond à une entité civile. Plus le nombre est élevé, plus la zone géographique est petite.
  • neighborhood indique un quartier nommé.
  • premise indique un lieu nommé, généralement un bâtiment ou un ensemble de bâtiments ayant un nom commun.
  • subpremise indique une entité de premier ordre située en dessous d'un lieu nommé, généralement un bâtiment particulier au sein d'un ensemble de bâtiments ayant un nom commun.
  • postal_code indique un code postal tel qu'utilisé dans les adresses de courrier postal du pays.
  • natural_feature indique une caractéristique naturelle importante.
  • airport indique un aéroport.
  • park indique un parc nommé.

Une liste de types vide indique qu'il n'y a aucun type connu pour un composant d'adresse particulier, par exemple un Lieu-dit en France.

En plus des types énumérés ci-dessus, les composants d'adresse peuvent contenir les types suivants :

  • post_box indique une boîte postale spécifique.
  • street_number indique le numéro de rue précis.
  • floor indique l'étage, pour une adresse d'immeuble.
  • room indique l'appartement, pour une adresse d'immeuble.

Codes de statut

Le code status peut renvoyer l'une des valeurs suivantes :

  • "OK" indique qu'aucune erreur n'est survenue, que l'adresse a été analysée et qu'au moins un géocode a été trouvé.
  • "ZERO_RESULTS" indique que le géocode a réussi mais n'a renvoyé aucun résultat. Cela peut se produire si le géocodeur a reçu un paramètre address inexistant.
  • "OVER_QUERY_LIMIT" indique que vous avez dépassé votre quota.
  • "REQUEST_DENIED" indique que votre requête a été rejetée.
  • "INVALID_REQUEST" indique généralement qu'il manque un élément (address, components ou latlng) de la requête.
  • "UNKNOWN_ERROR" indique que la requête n'a pas pu être traitée en raison d'une erreur de serveur. Si vous essayez à nouveau, la requête pourrait aboutir.

Dans cet exemple, nous géocodons une adresse et plaçons un marqueur aux valeurs de latitude et de longitude renvoyées. Notez que le handler est utilisé en tant que littéral de fonction anonyme.

  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 8,
      center: latlng
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
  }

  function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == 'OK') {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

<body onload="initialize()">
 <div id="map" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>

Voir l'exemple (geocoding-simple.html)

Géocodage inversé (recherche d'adresse)

Le terme géocodage fait généralement référence à la conversion d'une adresse lisible en un point géographique sur une carte. Le processus inverse, c'est-à-dire la conversion d'un point géographique sur une carte en adresse lisible, est appelé géocodage inversé.

Le géocodeur prend directement en charge le géocodage inversé. Plutôt que de fournir un code address au format texte, fournissez une paire latitude/longitude séparée par une virgule dans le paramètre location. Vous pouvez également fournir un placeId pour trouver l'adresse correspondant à un identifiant de lieu donné.

Géocodage inversé par point géographique

Dans l'exemple suivant, nous géocodons des valeurs de latitude/longitude et centrons la carte sur le point géographique ainsi défini, puis affichons une fenêtre d'info avec l'adresse formatée. Nous renvoyons le deuxième résultat, qui est moins précis que le premier (dans le cadre de cet exemple, le nom d'un quartier) :

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.731, lng: -73.997}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === 'OK') {
      if (results[1]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
<div id="floating-panel">
  <input id="latlng" type="text" value="40.714224,-73.961452">
  <input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></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;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  width: 350px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#latlng {
  width: 225px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.731, lng: -73.997}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === 'OK') {
      if (results[1]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}

Voir l'exemple (geocoding-reverse.html)

Notez que dans l'exemple précédent, nous avons montré le second résultat (en sélectionnant results[1]). Notez que le géocodeur inversé renvoie souvent plusieurs résultats. Les « adresses » géocodées ne correspondent pas uniquement à des adresses postales, mais également à toutes les possibilités de nommer géographiquement un lieu. Par exemple, lors du géocodage d'un point dans la ville de Chicago, le point géocodé peut être indiqué sous la forme d'une adresse postale, d'une ville (Chicago), d'un État (Illinois) ou d'un pays (États-Unis). Toutes ces désignations sont des adresses pour le géocodeur. Le géocodeur inversé renvoie tous ces résultats.

Le géocodeur inversé fait correspondre les entités politiques (pays, provinces, villes et quartiers), les adresses postales et les codes postaux.

La liste complète des adresses renvoyées par la requête précédente est affichée ci-dessous.

results[0].formatted_address: "275-291 Bedford Ave, Brooklyn, NY 11211, USA",
results[1].formatted_address: "Williamsburg, NY, USA",
results[2].formatted_address: "New York 11211, USA",
results[3].formatted_address: "Kings, New York, USA",
results[4].formatted_address: "Brooklyn, New York, USA",
results[5].formatted_address: "New York, New York, USA",
results[6].formatted_address: "New York, USA",
results[7].formatted_address: "United States"

Les adresses sont renvoyées par ordre décroissant de correspondance. En règle générale, l'adresse la plus précise est le résultat le plus mis en avant, comme le montre notre exemple. Notez que nous renvoyons différents types d'adresse, de l'adresse postale la plus précise, aux entités politiques les moins précises comme les quartiers, les villes, les départements, etc. Si vous souhaitez faire correspondre une adresse plus générale, examinez le champ results[].types.

Remarque : Le géocodage inversé n'est pas une science exacte. Le géocodeur tente de trouver l'adresse la plus proche avec une certaine tolérance.

Géocodage inversé par identifiant de lieu

Dans l'exemple suivant, nous acceptons l'identifiant de lieu, trouvons l'adresse correspondante et centrons la carte sur ce point géographique. Nous affichons également une fenêtre d'info indiquant l'adresse formatée du lieu correspondant :

// Initialize the map.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.72, lng: -73.96}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodePlaceId(geocoder, map, infowindow);
  });
}

// This function is called when the user clicks the UI button requesting
// a reverse geocode.
function geocodePlaceId(geocoder, map, infowindow) {
  var placeId = document.getElementById('place-id').value;
  geocoder.geocode({'placeId': placeId}, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        map.setZoom(11);
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
<div id="floating-panel">
  <!-- Supply a default place ID for a place in Brooklyn, New York. -->
  <input id="place-id" type="text" value="ChIJd8BlQ2BZwokRAFUEcm_qrcA">
  <input id="submit" type="button" value="Reverse Geocode by Place ID">
</div>
<div id="map"></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;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  width: 440px;
}
#place-id {
  width: 250px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// Initialize the map.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.72, lng: -73.96}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodePlaceId(geocoder, map, infowindow);
  });
}

// This function is called when the user clicks the UI button requesting
// a reverse geocode.
function geocodePlaceId(geocoder, map, infowindow) {
  var placeId = document.getElementById('place-id').value;
  geocoder.geocode({'placeId': placeId}, function(results, status) {
    if (status === 'OK') {
      if (results[0]) {
        map.setZoom(11);
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
        });
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}

Voir l'exemple (geocoding-place-id.html)

Limiter les résultats à une fenêtre d'affichage

Vous pouvez également demander au service de géocodage de privilégier les résultats à l'intérieur d'une fenêtre d'affichage donnée (exprimée sous la forme d'un cadre). Pour ce faire, vous devez définir le paramètre bounds au sein du littéral objet GeocoderRequest afin d'établir les limites de cette fenêtre d'affichage. Notez que ce paramètre ne fait que privilégier les résultats dans les limites ; s'il existe des résultats plus pertinents en dehors de ces limites, ils peuvent être inclus.

Par exemple, le géocode de « Winnetka » renvoie généralement cette banlieue de Chicago :

{
  "types":["locality","political"],
  "formatted_address":"Winnetka, IL, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["locality","political"]
  },{
    "long_name":"Illinois",
    "short_name":"IL",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location":[ -87.7417070, 42.1083080],
    "location_type":"APPROXIMATE"
  },
  "place_id": "ChIJW8Va5TnED4gRY91Ng47qy3Q"
}

Toutefois, si vous spécifiez un paramètre bounds définissant une zone de délimitation pour la Vallée de San Fernando à Los Angeles, ce géocode renvoie le quartier nommé « Winnetka » situé dans ce lieu :

{
  "types":["sublocality","political"],
  "formatted_address":"Winnetka, California, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["sublocality","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_3","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"California",
    "short_name":"CA",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location": [34.213171,-118.571022],
    "location_type":"APPROXIMATE"
  },
  "place_id": "ChIJ0fd4S_KbwoAR2hRDrsr3HmQ"
}

Limiter les résultats à un code de région

Vous pouvez également définir le service de géocodage pour renvoyer explicitement des résultats orientés vers une région en particulier, en utilisant le paramètre region. Ce paramètre utilise un code de région, indiqué sous forme d'une balise secondaire region en langage IANA. Dans la plupart des cas, ces balises sont directement mappées sur des valeurs familières ccTLD (« domaine de premier niveau ») à deux caractères, par exemple « uk » dans « co.uk ». Dans certains cas, la balise region prend également en charge les codes ISO-3166-1, qui parfois diffèrent des valeurs ccTLD (« GB » pour « Grande-Bretagne », par exemple).

Des requêtes de géocodage peuvent être envoyées pour chaque domaine dans lequel l'application Google Maps propose le géocodage. Notez que ce procédé ne fait que privilégier les résultats propres à un domaine particulier ; s'il existe des résultats plus pertinents en dehors de ce domaine, ils peuvent être inclus.

Par exemple, un géocode pour « Toledo » renvoie le résultat suivant, car le domaine par défaut du service de géocodage est défini sur les États-Unis :

{
  "types":["locality","political"],
  "formatted_address":"Toledo, OH, USA",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Ohio",
    "short_name":"OH",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "place_id": "ChIJeU4e_C2HO4gRRcM6RZ_IPHw"
}

Une requête de géocodage pour « Toledo » avec le champ region défini sur 'es' (Espagne) renvoie les coordonnées de la ville espagnole :

{
  "types":["locality","political"],
  "formatted_address":"Toledo, España",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Toledo",
    "short_name":"TO",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"Castilla-La Mancha",
    "short_name":"CM",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"España",
    "short_name":"ES",
    "types":["country","political"]
  }],
  "place_id": "ChIJ8f21C60Lag0R_q11auhbf8Y"
}

Filtrer par composants

Vous pouvez également définir le service de géocodage pour renvoyer des résultats d'adresse limités à une zone spécifique. Définissez les limitations au moyen du paramètre componentRestrictions. Un filtre consiste en un ou plusieurs arguments route, locality, administrativeArea, postalCode ou country. Seuls les résultats correspondant à tous les filtres sont renvoyés. Les valeurs de filtre prennent en charge les mêmes méthodes de correction orthographique et de correspondance partielle que les autres requêtes de géocodage.

L'exemple suivant montre l'utilisation du paramètre componentRestrictions pour filtrer en fonction du pays (country) et du code postal (postalCode) :

function codeAddress() {
geocoder.geocode({
  componentRestrictions: {
    country: 'AU',
    postalCode: '2000'
  }
}, function(results, status) {
  if (status == 'OK') {
    map.setCenter(results[0].geometry.location);
    var marker = new google.maps.Marker({
      map: map,
      position: results[0].geometry.location
    });
  } else {
    window.alert('Geocode was not successful for the following reason: ' + status);
  }
});
}

Envoyer des commentaires concernant…

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