Utiliser les API Geocoding et Places avec un style basé sur les données

Vous pouvez utiliser l'API Geocoding ou l'API Places dans l'API Maps JavaScript pour rechercher des régions et obtenir plus d'informations sur les lieux renvoyés par le service de recherche de régions. Les API Geocoding et Places sont des alternatives puissantes et stables pour obtenir des ID de lieu. Si vous utilisez déjà des ID de lieu, vous pouvez facilement les réutiliser avec le style basé sur les données.

Vous pouvez ajouter Geocoding et Places à vos applications d'API Maps JavaScript comme suit :

Le service Geocoding et la classe Geocoder peuvent effectuer un geocoding et un geocoding inversé de manière dynamique à partir d'une entrée utilisateur.
L'API Geocoding vous permet de géocoder des adresses statiques connues.
La bibliothèque Places, API Maps JavaScript permet à votre application de rechercher des lieux et inclut un widget de saisie semi-automatique.
L'API Places renvoie des informations sur les lieux qui utilisent des requêtes HTTP.

Utiliser l'API Geocoding

L'API Geocoding vous permet de convertir des adresses en coordonnées géographiques, et inversement. Les éléments suivants se combinent bien au style basé sur les données :

Utilisez Geocoding pour obtenir la fenêtre d'affichage d'une région.
Appliquez un filtrage par composants à votre appel Geocoding pour obtenir les ID de lieu des zones administratives 1 à 4, des localités ou des codes postaux.
Le geocoding inversé permet de trouver des identifiants de lieu avec des coordonnées de latitude/longitude, ou même de renvoyer des ID de lieu pour tous les composants d'un lieu donné.

Obtenir la fenêtre d'affichage d'une région

Le service Geocoding peut, à partir d'un ID de lieu, renvoyer une fenêtre d'affichage, que vous pouvez transmettre à la fonction map.fitBounds() pour zoomer sur un polygone de limite sur la carte. L'exemple suivant montre comment utiliser le service Geocoding pour obtenir une fenêtre d'affichage, puis appeler map.fitBounds() :

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API and zoom to the resulting bounds.
function zoomToPolygon(placeid) {
    geocoder
        .geocode({ placeId: placeid })
        .then(({ results }) => {
            map.fitBounds(results[0].geometry.viewport, 155);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}

Utiliser le geocoding inversé

Le geocoding inversé peut être utilisé pour trouver des ID de lieu. L'exemple de fonction de service Geocoding suivant renvoie les ID de lieu pour tous les composants d'adresse aux coordonnées de latitude/longitude spécifiées :

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API.
function getPlaceIds(latLng) {
    geocoder
        .geocode({ latLng })
        .then(({ results }) => {
            console.log('Geocoding result:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}

L'appel de service Web équivalent pour le geocoding inversé se présente comme suit :

https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930

En utilisant le geocoding inversé avec le filtrage par composants, vous pouvez obtenir le composant d'adresse pour un ou plusieurs des types suivants à l'emplacement spécifié :

administrativeArea
country
locality
postalCode

L'exemple de fonction suivant illustre l'utilisation du service Geocoding, en ajoutant des restrictions de composants avec geocoding inversé pour obtenir tous les composants d'adresse à l'emplacement spécifié pour le type locality uniquement :

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

function getPlaceIdWithRestrictions(latLng) {
    geocoder
        .geocode({ latLng,
            componentRestrictions: {
              country: "US",
              locality: "chicago",
            },
        })
        .then(({ results }) => {
            console.log('Geocoding result with restriction:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
            console.log(results[0].address_components[1].types[0]);
            console.log(results[0].address_components[1].long_name);
        })
        .catch((e) => {
            console.log('getPlaceId Geocoder failed due to: ' + e)
        });
}

L'appel de service Web équivalent pour le geocoding inversé se présente comme suit :

https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality

Utiliser Place Autocomplete pour rechercher des régions

Le widget Place Autocomplete permet aux utilisateurs de rechercher facilement des régions. Pour configurer le widget Place Autocomplete afin qu'il ne renvoie que des régions, définissez types sur (regions), comme indiqué dans l'extrait de code suivant :

// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
  fields: ["place_id", "type"],
  strictBounds: false,
  types: ["(regions)"],
};

Obtenir des détails sur un lieu pour une région

Les données concernant les informations sur un lieu pour une région peuvent être très utiles. Par exemple, vous pouvez :

rechercher des ID de lieux limites en fonction des noms de lieux ;
obtenir la fenêtre d'affichage pour zoomer sur une limite ;
obtenir le type d'élément géographique de la limite (par exemple, locality) ;
obtenir l'adresse formatée, qui correspond à "Nom du lieu, État, Pays" aux États-Unis (par exemple, "Ottumwa, IA, USA") ;
obtenir d'autres données utiles, comme des photos.

Cet exemple montre comment utiliser le service Places pour effectuer une requête Find Place afin d'obtenir l'ID de lieu pour l'État de Washington :

const request = {
    query: 'Washington',
    fields: ['place_id'],
  };

function findPlaceId() {
    placesService
        .findPlaceFromQuery(request, function (results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                console.log(results[0]);
            }
        });
}

L'appel de service Web équivalent pour Find Place se présente comme suit :

https://maps.googleapis.com/maps/api/place/findplacefromtext/json?fields=place_id&input=Washington&inputtype=textquery&key=YOUR_API_KEY

Les exemples suivants envoient une requête Places Details au service Places pour obtenir place.geometry.viewport, puis appelle map.fitBounds() pour centrer la carte sur le polygone de limite sélectionné.

const request = {
  placeId: placeid,
  fields: [
    "name",
    "formatted_address",
    "geometry",
    "photos",
    "type",
  ],
};

placesService.getDetails(request, (place, status) => {
  if (
    status === google.maps.places.PlacesServiceStatus.OK &&
    place &&
    place.geometry &&
    place.geometry.location
  ) {
    // Zoom to the boundary polygon.
    let viewport = place.geometry.viewport;
    map.fitBounds(viewport, 155);

    // Print some place details to the console.
    const types = place.types;
    console.log("Feature type: " + types[0]);
    console.log("Formatted address: " + formatted_address);
    }
  }
});