Usar as APIs Geocoding e Places com o estilo orientado a dados

Use as APIs Geocoding ou Places na API Maps JavaScript para procurar regiões e extrair mais informações sobre lugares retornados pelo serviço de pesquisa por região. As APIs Geocoding e Places são alternativas avançadas e estáveis para acessar IDs de lugares. Se você já usa esses IDs, é fácil reutilizar com o estilo orientado a dados.

Adicione Geocoding e Places aos seus apps da API Maps JavaScript destas maneiras:

Usar a API Geocoding

Com a API Geocoding, você pode converter endereços em coordenadas geográficas e vice-versa. Estes usos funcionam bem com o estilo orientado a dados:

  • Use a geocodificação para acessar a janela de visualização de uma região.
  • Aplique a filtragem de componentes à chamada da geocodificação para receber os IDs de lugar das áreas político-administrativas 1-4, regiões administrativas ou códigos postais.
  • Use a geocodificação inversa para encontrar os IDs de lugar por coordenadas de latitude/longitude ou até mesmo retornar IDs de todos os componentes em um determinado local.

Acessar a janela de visualização de uma região

Com o serviço de geocodificação, é possível usar um ID de lugar e retornar uma janela de visualização, que é transmitida à função map.fitBounds() para aplicar zoom em um polígono de limites no mapa. O exemplo a seguir mostra como usar o serviço de geocodificação para acessar uma janela de visualização e chamar map.fitBounds() em seguida:

// 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)
        });
}

Usar geocodificação inversa

A geocodificação inversa pode ser usada para encontrar IDs de lugar. O exemplo de função do serviço de geocodificação a seguir retorna os IDs de lugar de todos os componentes de endereço nas coordenadas de latitude/longitude especificadas:

// 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)
        });
}

Esta é a chamada de serviço da Web de geocodificação inversa equivalente:

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

Use a geocodificação inversa com filtragem de componentes para encontrar o componente de endereço de um ou mais destes tipos no local especificado:

  • administrativeArea
  • country
  • locality
  • postalCode

O próximo exemplo mostra o uso do serviço de geocodificação, adicionando restrições de componentes com geocodificação inversa para encontrar todos os componentes de endereço no local especificado apenas para o tipo locality:

// 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)
        });
}

Esta é a chamada de serviço da Web de geocodificação inversa equivalente:

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

Usar o Places Autocomplete para encontrar regiões

O widget do Places Autocomplete oferece uma maneira conveniente para os usuários pesquisarem regiões. Para que o widget do Places Autocomplete retorne apenas regiões, defina types como (regions), conforme mostrado no snippet a seguir:

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

Gerar detalhes de lugares em uma região

Os dados de detalhes de lugares de uma região podem ser bastante úteis. Por exemplo, você pode:

  • Procurar IDs de lugares limites com base nos nomes deles.
  • Acessar a janela de visualização para aplicar zoom a um limite.
  • Encontrar o tipo de recurso do limite (por exemplo, locality).
  • Encontrar o endereço formatado, que é resolvido como "Nome do local, estado, país" na região dos Estados Unidos (por exemplo, "Ottumwa, IA, EUA").
  • Localizar outros dados úteis, como fotos.

Este exemplo mostra o uso do serviço do Places para que uma solicitação de localizar lugar por consulta encontre o ID de lugar do estado 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]);
            }
        });
}

Esta é a chamada de serviço da Web de Find Place equivalente:

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

O exemplo a seguir faz uma solicitação de detalhes de lugar do serviço do Places para gerar place.geometry.viewport e chama map.fitBounds() para centralizar o mapa no polígono de limites selecionado.

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);
    }
  }
});