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.
Obtener una clave de APICarga 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.
TypeScript
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'); } }
JavaScript
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"); } }
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.
TypeScript
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'); } }
JavaScript
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;
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).
TypeScript
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); }
JavaScript
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); }
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
Campo | Clase Place (solo en canales v=beta) |
---|---|
Componente de dirección | addressComponents |
Estado comercial | businessStatus |
Dirección con formato | adrFormatAddress |
Ubicación | location |
Ícono | icon |
URI base de máscara de ícono | svgIconMaskUri |
Color de fondo del ícono | iconBackgroundColor |
Nombre | displayName |
Foto | photos |
ID de lugar | id |
Plus Code | plusCode |
Tipo | types |
URL | websiteURI |
Compensación de UTC | utcOffsetMinutes |
Viewport | viewport |
Entrada con acceso para silla de ruedas | hasWheelchairAccessibleEntrance |
Campos de datos de contacto
Campo | Clase Place (solo en canales v=beta) |
---|---|
Número de teléfono | nationalPhoneNumber |
Número de teléfono internacional | internationalPhoneNumber |
Horario de atención | openingHours |
Sitio web | websiteURI |
Campos de datos atmosféricos
Campo | Clase Place (solo en canales v=beta) |
---|---|
Retiros en la puerta | hasCurbsidePickup |
Entrega | hasDelivery |
Consumo en el lugar | hasDineIn |
Nivel de precio | priceLevel |
Calificación | rating |
Posibilidad de reserva | isReservable |
Opiniones | reviews |
Ofrece cerveza | servesBeer |
Ofrece desayunos | servesBreakfast |
Ofrece desayunos-almuerzos | servesBrunch |
Ofrece cenas | servesDinner |
Ofrece almuerzos | servesLunch |
Ofrece comida vegetariana | servesVegetarianFood |
Ofrece vino | servesWine |
Comida para llevar | hasTakeout |
Total de calificaciones de los usuarios | userRatingsCount |