Clase Place (versión preliminar)

Descripción general

La clase Place proporciona una API más simple para usar la biblioteca de Places de la API de Maps JavaScript y admite patrones de uso modernos, como las promesas.

Cómo comenzar

Obtén una clave de API y habilita las APIs necesarias

Antes de usar la versión preliminar de la clase Place, necesitas un proyecto de Cloud con una cuenta de facturación. También debes habilitar las APIs de Maps JavaScript y de Places. Sigue las instrucciones para habilitar una o más APIs o SDKs. Ten en cuenta que ambas APIs deben estar habilitadas en el mismo proyecto en la consola de Cloud.

Carga la biblioteca de Places

Para usar la funcionalidad que ofrece la biblioteca de Places, primero debes cargarla con el parámetro libraries en la URL de carga de la secuencia de comandos de la API de Maps JavaScript. Para usar esta versión preliminar, también debes especificar el parámetro v=beta.

<script async
  src="https://maps.googleapis.com/maps/api/js?v=beta&key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>

Busca un lugar con una búsqueda de texto

Llama a findPlaceFromQuery para encontrar un lugar con una búsqueda de texto. Usa el parámetro fields para especificar una lista separada por comas de uno o más campos de datos de lugar con mayúsculas mediales. Usa fields: ['*'] para mostrar todos los datos de un lugar (disponible solo para pruebas; no se recomienda su uso en un entorno de producción).

En el siguiente ejemplo, se muestra cómo usar un patrón asíncrono o de espera para llamar al parámetro findPlaceFromQuery y mostrar los resultados en un mapa.

let map: google.maps.Map;
let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 };

function initMap() {
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: centerCoordinates,
        zoom: 14,
        // ...
    });

    findPlace();
}

async function findPlace() {
    const request = {
        query: 'Sports Page',
        fields: ['displayName', 'location'],
        locationBias: centerCoordinates,
    };

    const { places } = await google.maps.places.Place.findPlaceFromQuery(request);

    if (places.length) {
        const place = places[0];
        const location = place.location as google.maps.LatLng;
        const markerView = new google.maps.marker.AdvancedMarkerView({
            map,
            position: place.location,
            title: place.displayName,
        });

        map.setCenter(location);

    } else {
        console.log('No results');
    }
}
index.ts

let map;
let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 };

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: centerCoordinates,
    zoom: 14,
    // ...
  });
  findPlace();
}

async function findPlace() {
  const request = {
    query: "Sports Page",
    fields: ["displayName", "location"],
    locationBias: centerCoordinates,
  };
  const { places } = await google.maps.places.Place.findPlaceFromQuery(request);

  if (places.length) {
    const place = places[0];
    const location = place.location;
    const markerView = new google.maps.marker.AdvancedMarkerView({
      map,
      position: place.location,
      title: place.displayName,
    });

    map.setCenter(location);
  } else {
    console.log("No results");
  }
}
index.js

Busca un lugar por número de teléfono

Llama al parámetro findPlaceFromPhoneNumber para encontrar un lugar por su número de teléfono. Los números de teléfono deben estar en formato internacional (precedidos por un signo más ("+"), seguido del código de país y, luego, el número en sí). Consulta la recomendación E.164 de ITU para obtener más información. Usa el parámetro fields para especificar una lista separada por comas de uno o más campos de datos de lugar con mayúsculas mediales. Usa fields: ['*'] para mostrar todos los datos de un lugar (disponible solo para pruebas; no se recomienda su uso en un entorno de producción).

En el siguiente ejemplo, se muestra cómo usar un patrón asíncrono o de espera para llamar al parámetro findPlaceFromPhoneNumber y mostrar los resultados en un mapa.

async function findPlaceByPhone() {
    const request = {
        phoneNumber: '+1(206)787-5388',
        fields: ['displayName', 'location'],
    }

    const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber(request);

    if (places.length) {
        const place = places[0];
        const markerView = new google.maps.marker.AdvancedMarkerView({
            map,
            position: place.location,
            title: place.displayName,
        });
        console.log(place.displayName);
    } else {
        console.log('No results');
    }
}
index.ts

async function findPlaceByPhone() {
  const request = {
    phoneNumber: "+1(206)787-5388",
    fields: ["displayName", "location"],
  };
  const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber(
    request
  );

  if (places.length) {
    const place = places[0];
    const markerView = new google.maps.marker.AdvancedMarkerView({
      map,
      position: place.location,
      title: place.displayName,
    });

    console.log(place.displayName);
  } else {
    console.log("No results");
  }
}

window.initMap = initMap;
index.js

Obtén detalles de un lugar

Si ya tienes un objeto Place o un ID de lugar, puedes llamar a Place.fetchFields para obtener más detalles sobre ese lugar. Usa el parámetro fields para especificar una lista separada por comas de uno o más campos de datos de lugar con mayúsculas mediales. Usa fields: ['*'] para mostrar todos los campos de datos (disponible solo para pruebas; no se recomienda su uso en un entorno de producción).

async function getPlaceDetails() {
    // Use place ID to create a new Place instance.
    const place = new google.maps.places.Place({
        id: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
        requestedLanguage: 'en', // optional
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({ fields: ['displayName', 'formattedAddress'] });

    // Show the result
    console.log(place.displayName);
    console.log(place.formattedAddress);
}
index.ts

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({ fields: ["displayName", "formattedAddress"] });
  // Show the result
  console.log(place.displayName);
  console.log(place.formattedAddress);
}
index.js

Campos de datos de lugar

Los campos corresponden a los resultados de Place Details y se dividen en tres categorías de facturación: datos básicos, de contacto y atmosféricos. Los campos de datos básicos se facturan con la tarifa base y no generan cargos adicionales. Los campos de datos de contacto y atmosféricos se facturan con una tarifa más alta. Consulta la hoja de precios para obtener más información. Las atribuciones (html_attributions) se muestran siempre con todas las llamadas, independientemente de que se hayan solicitado o no.

La clase Place admite los siguientes campos:

Datos básicos

Campos de datos de contacto

Campos de datos atmosféricos