Você pode usar a API Places e a API Geocoding na API Maps JavaScript para pesquisar regiões e conferir mais informações sobre lugares. 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 para limites.
Adicione as APIs Places e Geocoding aos seus apps da API Maps JavaScript das seguintes maneiras:
- Na biblioteca Places da API Maps JavaScript, seu app pode procurar lugares, e ela inclui um widget de preenchimento automático.
- A API Places retorna informações sobre lugares usando solicitações HTTP.
- O serviço Geocoding e a classe do geocodificador podem geocodificar e fazer a geocodificação inversa da entrada do usuário de forma dinâmica.
- Com a API Geocoding, é possível geocodificar endereços estáticos e conhecidos.
Usar a API Places
Usar o Text Search (pré-lançamento) para encontrar uma região
É possível usar o Text Search (pré-lançamento) para ter acesso a um ID de lugar que inclua dados de região. Basta usar includedType
para especificar o tipo de região a ser retornado. O uso da API Text Search (pré-lançamento) para solicitar apenas IDs de lugar não será cobrado. Saiba mais.
Esta função de exemplo faz uma solicitação searchByText
para conseguir o ID de lugar de Trinidad, CA, e aplica o estilo ao limite:
async function findBoundary(Place) {
const request = {
query: 'Trinidad, CA',
fields: ['id', 'location'],
includedType: 'locality',
locationBias: center,
};
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 = /** @type {!google.maps.FeatureStyleOptions} */({
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();
Usar o Place 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.
A função de exemplo a seguir chama fetchFields()
para ter acesso a detalhes do lugar, incluindo place.geometry.viewport
. Em seguida, chama map.fitBounds()
para centralizar o mapa no polígono de limites selecionado.
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);
}
Usar a API Geocoding
Com a API Geocoding, você pode converter endereços em coordenadas geográficas e vice-versa. Os exemplos de uso a seguir combinam bem com o estilo orientado a dados para limites:
- 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