Usar as APIs do Places e a geocodificação com estilo orientado a dados para limites

Selecione a plataforma: Android iOS JavaScript

Desenvolvedores do Espaço Econômico Europeu (EEE)

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 baseado em dados para limites.

Adicione as APIs Places e Geocoding aos seus apps da API Maps JavaScript das seguintes maneiras:

Usar a API Places

Usar Text Search (novo) para encontrar uma região

É possível usar a Pesquisa de texto (novo) para ter acesso a um ID de lugar que inclua dados de região. Basta utilizar includedType para especificar o tipo de região a ser retornado. O uso de Text Search (novo) na API para solicitar apenas IDs de lugar não será cobrado. Saiba mais.

Este mapa de exemplo demonstra como fazer uma solicitação searchByText para conseguir o ID de lugar de Trinidad, CA, e aplicar o estilo ao limite:

TypeScript

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

  const { Place } = (await google.maps.importLibrary(
    'places'
  )) as google.maps.PlacesLibrary;
  const { places } = await Place.searchByText(request);

  if (places.length) {
    const place = places[0];
    styleBoundary(place.id);
    innerMap.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 = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };
    const { Place } = (await google.maps.importLibrary('places'));
    const { places } = await Place.searchByText(request);
    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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

Confira o código-fonte de exemplo completo

TypeScript

let innerMap;
let featureLayer;
let center;

async function initMap() {
  // Load the needed libraries.
  await google.maps.importLibrary('maps') as google.maps.MapsLibrary;

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

  // Get the gmp-map element.
  const mapElement = document.querySelector(
    'gmp-map'
  ) as google.maps.MapElement;

  // Get the inner map.
  innerMap = mapElement.innerMap;

  // Get the LOCALITY feature layer.
  featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);

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

  const { Place } = (await google.maps.importLibrary(
    'places'
  )) as google.maps.PlacesLibrary;
  const { places } = await Place.searchByText(request);

  if (places.length) {
    const place = places[0];
    styleBoundary(place.id);
    innerMap.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 innerMap;
let featureLayer;
let center;
async function initMap() {
    // Load the needed libraries.
    await google.maps.importLibrary('maps');
    center = { lat: 41.059, lng: -124.151 }; // Trinidad, CA
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');
    // Get the inner map.
    innerMap = mapElement.innerMap;
    // Get the LOCALITY feature layer.
    featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);
    findBoundary();
}
async function findBoundary() {
    const request = {
        textQuery: 'Trinidad, CA',
        fields: ['id', 'location'],
        includedType: 'locality',
        locationBias: center,
    };
    const { Place } = (await google.maps.importLibrary('places'));
    const { places } = await Place.searchByText(request);
    if (places.length) {
        const place = places[0];
        styleBoundary(place.id);
        innerMap.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

Usar o Place Autocomplete para encontrar regiões

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

// Set up the Autocomplete widget to return only region results.
placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
placeAutocomplete.includedPrimaryTypes = ['(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 avaliações e fotos de usuários.

O seguinte exemplo de função encontra o limite de Trinidad, CA, e centraliza o resultado no mapa:

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 data fields you want.
        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 baseado em 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:

```html
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:

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