Cómo usar las APIs de Geocoding y Places con un diseño basado en datos

Puedes usar las APIs de Geocoding o Places en la API de Maps JavaScript para buscar regiones y obtener más información sobre los lugares que muestra el servicio de búsqueda de regiones. Las APIs de Geocoding y Places son alternativas eficaces y estables para obtener IDs de lugar. Si ya usas IDs de lugar, puedes volver a usarlos fácilmente con el diseño basado en datos.

Puedes agregar Geocoding y Places a las apps de la API de Maps JavaScript de las siguientes maneras:

El servicio de Geocoding y la clase Geocoder pueden generar geocodificaciones y geocodificaciones inversas de forma dinámica a partir de las entradas del usuario.
La API de Geocoding te permite geocodificar direcciones conocidas y estáticas.
La biblioteca de Places de la API de Maps JavaScript permite que tu app busque lugares y, además, incluye un widget de autocompletado.
La API de Places muestra información sobre lugares mediante solicitudes HTTP.

Cómo usar la API de Geocoding

La API de Geocoding te permite convertir direcciones en coordenadas geográficas y viceversa. Los siguientes usos pueden combinarse perfectamente con el diseño basado en datos:

Usa Geocoding para obtener el viewport de una región.
Aplica el filtrado de componentes a tu llamada a Geocoding para obtener los IDs de lugar de las áreas administrativas 1-4, la localidad o el código postal.
Usa la geocodificación inversa para encontrar los IDs de lugar por coordenadas de latitud y longitud, o incluso mostrar los IDs de lugar de todos los componentes de una ubicación específica.

Cómo obtener el viewport de una región

El servicio de Geocoding puede usar un ID de lugar para mostrar un viewport, que puedes pasar a la función map.fitBounds() para hacer zoom en un polígono de límite en el mapa. En el siguiente ejemplo, se muestra cómo usar el servicio de Geocoding para obtener un viewport y, luego, llamar a 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)
        });
}

Cómo usar la geocodificación inversa

Puedes usar la geocodificación inversa para buscar IDs de lugar. En el siguiente ejemplo, la función del servicio de Geocoding muestra los IDs de lugar de todos los componentes de dirección en las coordenadas de latitud y longitud 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 es la llamada equivalente del servicio web de geocodificación inversa:

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

Puedes usar la geocodificación inversa con el filtrado de componentes para obtener el componente de dirección de uno o más de los siguientes tipos en la ubicación especificada:

administrativeArea
country
locality
postalCode

En la siguiente función de ejemplo, se muestra cómo se usa el servicio de Geocoding y se agregan restricciones de componentes con geocodificación inversa para obtener todos los componentes de dirección de la ubicación especificada solo para el 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 es la llamada equivalente del servicio web de geocodificación inversa:

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

Cómo usar Place Autocomplete para encontrar regiones

El widget de Place Autocomplete ofrece una manera conveniente de permitir que los usuarios busquen regiones. Si deseas configurar el widget de Place Autocomplete para que solo muestre regiones, establece types en (regions), como se muestra en el siguiente fragmento:

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

Cómo obtener detalles del lugar de una región

Los datos de detalles del lugar de una región pueden ser muy útiles. Por ejemplo, puedes hacer lo siguiente:

Buscar IDs de lugar de límite según los nombres de lugares
Obtener el viewport para aplicar zoom a un límite
Obtener el tipo de función del límite (por ejemplo, locality)
Obtener la dirección con formato, que se resuelve como "Nombre del lugar, estado, país" en la región de Estados Unidos (por ejemplo, "Ottumwa, IA, EE.UU.")
Obtener otros datos útiles, como fotos

En este ejemplo, se muestra cómo se usa el servicio de Places a fin de realizar una solicitud de búsqueda de lugar para obtener el ID de lugar del 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 es la llamada equivalente del servicio web Find Place:

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

En los siguientes ejemplos, se realiza una solicitud de detalles de lugares del servicio de Places para obtener place.geometry.viewport y, luego, se llama a map.fitBounds() a fin de centrar el mapa en el polígono de límite seleccionado.

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