Cómo usar las APIs de Places y Geocoding con un diseño basado en datos aplicable a límites

Selecciona la plataforma: iOS JavaScript

Puedes usar las APIs de Places y Geocoding en la API de Maps JavaScript para buscar regiones y obtener más información sobre lugares. Las APIs de Places y Geocoding son alternativas eficaces y estables para obtener IDs de lugar. Si ya usas IDs de lugar, puedes reutilizarlos fácilmente con un diseño basado en datos aplicable a límites.

Agrega Places y Geocoding a tus apps de la API de Maps JavaScript de las siguientes maneras:

Cómo usar la API de Places

Cómo usar Text Search (nueva) para encontrar una región

Puedes usar Text Search (nueva) para obtener un ID de lugar que incluya datos de la región. Para ello, debes usar includedType para especificar el tipo de región que se debe mostrar. El uso de la API de Text Search (nueva) para solicitar únicamente IDs de lugar no genera ningún cargo. Obtén más información.

En este mapa de ejemplo, se hace una solicitud searchByText para obtener el ID de lugar de Trinidad, California, y, luego, se aplica diseño al límite correspondiente:

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

Consulta el ejemplo de código fuente completo

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

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

Mediante la siguiente función de ejemplo, se puede encontrar el límite para Trinidad, California, y se centra el mapa en el resultado:

En la siguiente función de ejemplo, se llama a fetchFields() para obtener detalles del lugar, que incluyen place.geometry.viewport, y luego se llama a map.fitBounds() para centrar el mapa en el polígono de límite seleccionado.

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

Usa la API de Geocoding

La API de Geocoding te permite convertir direcciones en coordenadas geográficas y viceversa. Los siguientes usos son compatibles con el diseño basado en datos aplicable a límites:

  • 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