Utiliser les API Places et le geocoding avec un style basé sur les données pour les limites

Sélectionnez une plate-forme : iOS JavaScript

Vous pouvez utiliser les API Places et Geocoding dans l'API Maps JavaScript pour rechercher des régions et obtenir plus d'informations sur les lieux. Les API Geocoding et Places constituent des solutions performantes 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 pour les limites.

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

Utiliser l'API Places

Utiliser Text Search (nouvelle version) pour rechercher une région

Vous pouvez utiliser Text Search (nouvelle version) pour obtenir un ID de lieu qui inclut des données de région en vous servant d'includedType pour spécifier le type de région à renvoyer. L'utilisation de l'API Text Search (nouvelle version) uniquement pour demander des ID de lieu n'occasionne pas de frais. En savoir plus

L'exemple de carte suivant montre comment effectuer une requête searchByText afin d'obtenir un ID de lieu pour Trinidad, en Californie, puis appliquer le style à la limite :

TypeScript

async function findBoundary() {
    const request = {
        query: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
    //@ts-ignore
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        map.setCenter(place.location);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5
    };

    // Define the feature style function.
    featureLayer.style = (params) => {
        if (params.feature.placeId == placeid) {
            return styleFill;
        }
    };
}
index.ts

JavaScript

async function findBoundary() {
  const request = {
    query: "Trinidad, CA",
    fields: ["id", "location"],
    includedType: "locality",
    locationBias: center,
  };
  const { Place } = await google.maps.importLibrary("places");
  //@ts-ignore
  const { places } = await Place.searchByText(request);

  if (places.length) {
    const place = places[0];

    styleBoundary(place.id);
    map.setCenter(place.location);
  } else {
    console.log("No results");
  }
}

function styleBoundary(placeid) {
  // Define a style of transparent purple with opaque stroke.
  const styleFill = {
    strokeColor: "#810FCB",
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: "#810FCB",
    fillOpacity: 0.5,
  };

  // Define the feature style function.
  featureLayer.style = (params) => {
    if (params.feature.placeId == placeid) {
      return styleFill;
    }
  };
}

index.js

Afficher l'exemple de code source complet

TypeScript

let map;
let featureLayer;
let center;

async function initMap() {
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

    center = {lat: 41.059, lng: -124.151}; // Trinidad, CA

    map = new Map(document.getElementById('map') as HTMLElement, {
        center: center,
        zoom: 15,
        // In the cloud console, configure this Map ID with a style that enables the
        // "Locality" Data Driven Styling type.
        mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>,
    });

    featureLayer = map.getFeatureLayer('LOCALITY');

    findBoundary();
}
async function findBoundary() {
    const request = {
        query: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };

    const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
    //@ts-ignore
    const { places } = await Place.searchByText(request);

    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        map.setCenter(place.location);
    } else {
        console.log('No results');
    }
}

function styleBoundary(placeid) {
    // Define a style of transparent purple with opaque stroke.
    const styleFill = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5
    };

    // Define the feature style function.
    featureLayer.style = (params) => {
        if (params.feature.placeId == placeid) {
            return styleFill;
        }
    };
}
initMap();
index.ts

JavaScript

let map;
let featureLayer;
let center;

async function initMap() {
  const { Map } = await google.maps.importLibrary("maps");

  center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA
  map = new Map(document.getElementById("map"), {
    center: center,
    zoom: 15,
    // In the cloud console, configure this Map ID with a style that enables the
    // "Locality" Data Driven Styling type.
    mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>,
  });
  featureLayer = map.getFeatureLayer("LOCALITY");
  findBoundary();
}

async function findBoundary() {
  const request = {
    query: "Trinidad, CA",
    fields: ["id", "location"],
    includedType: "locality",
    locationBias: center,
  };
  const { Place } = await google.maps.importLibrary("places");
  //@ts-ignore
  const { places } = await Place.searchByText(request);

  if (places.length) {
    const place = places[0];

    styleBoundary(place.id);
    map.setCenter(place.location);
  } else {
    console.log("No results");
  }
}

function styleBoundary(placeid) {
  // Define a style of transparent purple with opaque stroke.
  const styleFill = {
    strokeColor: "#810FCB",
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: "#810FCB",
    fillOpacity: 0.5,
  };

  // Define the feature style function.
  featureLayer.style = (params) => {
    if (params.feature.placeId == placeid) {
      return styleFill;
    }
  };
}

initMap();
index.js

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 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 de détails sur un lieu pour une région peuvent être très utiles. Par exemple, vous pouvez :

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

L'exemple de fonction suivant trouve la limite pour Trinidad, Californie, et centre la carte sur le résultat :

L'exemple de fonction suivant appelle fetchFields() pour obtenir des informations sur le lieu, y compris place.geometry.viewport, puis appelle map.fitBounds() pour centrer la carte sur le polygone de limite sélectionné.

    async function getPlaceDetails(placeId) {
        // Use place ID to create a new Place instance.
        const place = new google.maps.places.Place({
            id: placeId,
        });

        // Call fetchFields, passing the desired data fields.
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'geometry', 'type'] });

        // 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: " + place.formattedAddress);
    }

Utiliser l'API Geocoding

L'API Geocoding vous permet de convertir des adresses en coordonnées géographiques, et inversement. Les utilisations suivantes se combinent bien avec un style basé sur les données pour les limites :

  • 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 régions administratives 1 à 4, des localités ou des codes postaux.
  • Le geocoding inversé permet de trouver des ID de lieu à partir de coordonnées de latitude/longitude, ou même d'afficher les ID de lieu de 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