Descripción general
Google Maps Platform está disponible para Android, iOS y la Web (JS o TS). Además, ofrece varias APIs de servicios web que permiten obtener información sobre lugares, instrucciones sobre cómo llegar y distancias. Las muestras de esta guía se redactaron para una sola plataforma, pero se proporcionan los vínculos de la documentación para poder implementarlas en otras.
La Herramienta de creación rápida de la consola de Google Cloud te permite construir rápidamente un localizador, incluida la importación de fichas del Perfil de Negocio y la incorporación automática de vínculos para reservar citas de proveedores externos. La IU interactiva te permite generar código e implementarlo en Cloud en cuestión de minutos.
Tus usuarios quieren investigar productos y servicios en línea, encontrar la ubicación más adecuada y conveniente para visitar tu empresa o negocio, programar una cita o retirar un pedido. Querrán llegar a tu ubicación lo más rápido posible, y tú deberías brindarles experiencias en línea enriquecedoras que aumenten las visitas a tus ubicaciones físicas, afiancen la satisfacción de los usuarios y reduzcan las llamadas de asistencia. También es importante que midas el éxito de tu localizador para determinar si los clientes pueden encontrar tu ubicación. Además, es muy útil poder identificar los aspectos que necesitan mejoras.
Locator Plus, con las indicaciones y sugerencias de personalización que proporcionamos en este documento, es la combinación óptima de APIs de Google Maps Platform para crear excelentes experiencias del usuario con el localizador. Si sigues estas prácticas, podrás ayudar a que los usuarios encuentren tus ubicaciones en un mapa y accedan a la información detallada que necesitan para tomar decisiones. Además, podrás brindarles instrucciones sobre cómo llegar, ya sea que circulen en automóvil, en bicicleta, a pie o en transporte público.
Si eres usuario de Locator Plus, un panel de análisis te permite examinar los datos y generar estadísticas a partir de ellos para tener una idea clara de cómo los compradores interactúan con tu localizador de tiendas. Para acceder a este informe, ve a la sección Informes de participación de la consola. Para obtener más detalles sobre este informe, consulta Informes de participación.
En el siguiente diagrama, se muestran las principales APIs requeridas para implementar Locator Plus. También se incluye tu propia base de datos de ubicación, que puedes combinar con Place Details para ofrecer a los usuarios la información más completa y precisa posible. (Haz clic para agrandar la imagen).
Habilita las APIs
Para implementar estas prácticas, debes habilitar las siguientes APIs en la consola de Google Cloud: Para obtener más información sobre la configuración, consulta Cómo comenzar a utilizar Google Maps Platform.Secciones de implementación
A continuación, se incluyen las prácticas y las personalizaciones que abarcaremos en este documento.
- El ícono de marca de verificación indica una práctica principal.
- El ícono de estrella indica las personalizaciones opcionales pero recomendadas para mejorar la solución.
| Cómo mostrar tus ubicaciones en un mapa interactivo |
Crea un mapa que permita a los usuarios consultar los detalles de la ubicación, desplazarse por diferentes áreas, y acercar y alejar la imagen. También puedes explorar la solución Locator Plus con la Herramienta de creación rápida para crear rápidamente un mapa, lo que incluye importar detalles de la empresa desde las fichas de tu Perfil de Negocio, incorporar vínculos para reservar citas y realizar la implementación en Google Cloud Storage. |
|
| Proporciona datos de Place Details | Una vez que los usuarios encuentren tus ubicaciones más cercanas en un mapa, muéstrales datos significativos de Place Details para ayudarlos a tomar decisiones. | |
| Muestra ubicaciones desde una vista de 45° | Brinda a los usuarios una mejor imagen de tu ubicación en vista de satélite desde un ángulo de 45 grados. | |
| Identifica la ubicación del usuario | Agrega la funcionalidad de predicción de escritura para mejorar la experiencia del usuario en todas las plataformas y aumentar la precisión de las direcciones sin que deba escribir demasiado. | |
| Muestra la duración y la distancia del viaje hasta las ubicaciones más cercanas | Calcula la duración y la distancia de viaje para varios puntos de origen y destino, y especifica opcionalmente diversas formas de transporte, como a pie, en automóvil o en bicicleta. | |
| Ayuda a los usuarios a reservar citas |
Permite que los usuarios reserven una cita desde el panel lateral de Place Details. También puedes explorar la solución Locator Plus con la Herramienta de creación rápida para crear rápidamente un mapa, lo que incluye importar detalles de la empresa desde las fichas de tu Perfil de Negocio, incorporar vínculos para reservar citas y realizar la implementación en Google Cloud Storage. |
|
| Cómo mostrar ofertas locales | Muestra a los usuarios ofertas locales en las que se puede hacer clic desde el panel lateral de Place Details. | |
| Proporciona instrucciones sobre cómo llegar | Obtén datos relacionados con las instrucciones sobre cómo llegar de un origen a un destino mediante diversas formas de transporte, como a pie, en automóvil, en bicicleta o en transporte público. | |
| Personaliza tu mapa | Crea marcadores de mapa personalizados para destacar tus ubicaciones y define el diseño del mapa de modo que combine con los colores de tu marca. Muestra (o bien oculta) lugares de interés específicos para ayudar a los usuarios a orientarse mejor y controla su densidad para no saturar el mapa con información. | |
| Obtén información de uso valiosa con las estadísticas | Configura y utiliza Google Analytics para obtener estadísticas sobre las estrategias y la implementación del localizador. | |
| Envía a dispositivos móviles las instrucciones sobre cómo llegar | Además de mostrar las instrucciones sobre cómo llegar en el localizador, puedes enviarlas al teléfono de un usuario para que navegue con ellas en Google Maps sobre la marcha. | |
| Muestra Street View para ayudar a los usuarios a visualizar las ubicaciones | Brinda a los usuarios imágenes de Street View con vistas de 360° para ayudarlos a orientarse y a encontrar más rápidamente tus ubicaciones. | |
| Determina la ubicación de los usuarios con Geolocation | Si no deseas utilizar los servicios de ubicación que vienen integrados en el dispositivo, usa Geolocation para determinar dónde se encuentran los usuarios. | |
| Combina los datos de ubicación personalizados con Place Details | Combina tus propios datos de ubicación personalizados con los de Place Details para ofrecer a los usuarios un sólido conjunto de datos y ayudarlos a tomar decisiones. |
Cómo mostrar tus ubicaciones en un mapa interactivo
Los localizadores son una parte importante de la experiencia del usuario. Sin embargo, algunos sitios pueden carecer hasta de un mapa, por lo que los usuarios deben abandonar el sitio o salir de la app para encontrar una ubicación cercana. Esto implica una experiencia poco satisfactoria para los usuarios que deben navegar de una página a otra para obtener la información que necesitan. En su lugar, puedes mejorar esta experiencia si incorporas mapas en tus aplicaciones y los personalizas.
Puedes habilitar esta función de dos maneras: usando la solución Locator Plus con la Herramienta de creación rápida para proporcionarla desde el primer momento o usando tu propia implementación de Dynamic Maps. En esta sección, se describen estas opciones en detalle.
Cómo usar Locator Plus con la Herramienta de creación rápida
Puedes usar la solución Locator Plus con la Herramienta de creación rápida para importar detalles de la empresa desde tu Perfil de Negocio. Por lo tanto, los cambios que se hagan en los detalles de la empresa de tu Perfil de Negocio se reflejarán en el localizador de tiendas de tu sitio web. Estos cambios pueden incluir el horario de atención, la información de contacto, fotos, opciones de servicio y mucho más. La Herramienta de creación rápida te permite explorar fácilmente la configuración de ubicaciones de la empresa en un mapa, generar código implementable o implementar el contenido directamente en Google Cloud Storage en cuestión de minutos.
Cómo usar tu propia implementación de Dynamic Maps
| Qué se utiliza en este ejemplo: API de Maps JavaScript | También disponible: Android | iOS |
Solo se requieren unas pocas líneas de código para agregar un mapa dinámico a tu página (es decir, uno que los usuarios puedan desplazar, acercar y alejar, así como utilizar para obtener detalles sobre diferentes ubicaciones y lugares de interés).
Primero, debes incluir la API de Maps JavaScript en la página.
Para ello, vincula la siguiente secuencia de comandos en tu página HTML, incluido libraries=marker, para que puedas agregar marcadores avanzados al mapa.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
La URL hace referencia a la función initMap de JavaScript que se ejecuta al cargarse la página. En la URL, también puedes definir el
idioma o la región de tu mapa para asegurarte de que tenga el formato correcto según el
país específico al que segmentas tu campaña. Configurar una región también garantiza que se personalice el comportamiento de las apps utilizadas fuera de los Estados Unidos según la región establecida. Consulta los
Detalles de la cobertura de Google Maps Platform
para ver una lista completa de las regiones y los idiomas admitidos, y obtén más información sobre el
uso del parámetro
region.
A continuación, debes incluir una etiqueta HTML div para colocar tu mapa en la página.
Este es el lugar donde se mostrará el mapa.
<div id="map"></div>
El próximo paso es configurar la funcionalidad básica del mapa. Esto debe hacerse en la función initMap especificada en la URL de secuencia de comandos. En esta secuencia de comandos, que se muestra en el siguiente ejemplo, puedes configurar la ubicación inicial, un ID de mapa (obligatorio para los marcadores avanzados y el diseño de mapas basado en Cloud), el tipo de mapa y los controles disponibles para los usuarios en el mapa. Ten en cuenta que getElementById() hace referencia al ID "map" del div en el ejemplo anterior.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
En el caso de los localizadores, lo que suele importar es configurar la ubicación inicial, el punto o los límites centrales y el nivel de zoom (cuánto se debe acercar el mapa a esa ubicación). La mayoría de los demás elementos, como el ajuste de los controles, son opcionales y puedes configurarlos a medida que determines el nivel de interacción con el mapa.
Obtén los IDs de lugar
| Qué se utiliza en este ejemplo: API de Places (nueva) | También disponible: JavaScript |
Es probable que tengas una base de datos de tus ubicaciones con información básica, como el nombre de esa ubicación, su dirección y su número de teléfono. Para recuperar la información que Google Maps
Platform tiene sobre ese lugar, incluidas las coordenadas geográficas y los datos aportados por usuarios, debes encontrar el ID de lugar
correspondiente a cada una de las ubicaciones en tu base de datos. Puedes
llamar al
extremo Text Search (nuevo) en la API de Places (nueva)
y solicitar solo el campo places.id en la máscara de campo (que activa el
SKU de Text Search Essentials IDs Only).
A continuación, se muestra un ejemplo de cómo solicitar el ID de lugar de la oficina de Google en Londres:
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'Puedes almacenar este ID de lugar en tu base de datos y usarlo como una forma eficiente de solicitar información sobre el lugar. A continuación, se indica cómo utilizar el ID de lugar para geocodificar ubicaciones, recuperar detalles de Place Details y solicitar instrucciones sobre cómo llegar allí.
Cómo geocodificar tus ubicaciones
| Qué se utiliza en este ejemplo: API de Geocoding | También disponible: JavaScript |
Si tu base de datos de ubicaciones incluye direcciones, pero no coordenadas geográficas, utiliza la API de Geocoding para obtener la latitud y longitud de esa dirección y así poder colocar el marcador en el mapa. Puedes geocodificar tus direcciones en el servidor, almacenar las latitudes y longitudes en tu base de datos y actualizar los valores cada 30 días como mínimo.
A continuación, se incluye un ejemplo de cómo utilizar la API de Geocoding a fin de conocer la latitud y longitud del ID de lugar obtenido para la oficina de Google en Londres:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_aAgrega ubicaciones al mapa
El próximo paso es agregar tus ubicaciones al mapa. Esto se suele hacer agregando marcadores avanzados al mapa, aunque hay otras opciones que puedes usar, como capas de datos.
Una vez que tengas la latitud y longitud de tu ubicación, aquí tienes un ejemplo para agregar un marcador avanzado con un glifo de texto personalizado al mapa:
const pin = new google.maps.marker.PinElement({ glyphText: "A", }); const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.146550 }, title: "Location Name", }); marker.append(pin);
Con unos pocos marcadores, puedes ver dónde se encuentran varias ubicaciones juntas.
Si hay una gran cantidad de ubicaciones, puedes considerar usar una utilidad de agrupamiento de marcadores para JavaScript, Android o iOS. Aquí tienes un ejemplo del agrupamiento de marcadores en clústeres en la muestra de JavaScript del localizador de tiendas de GitHub.
Proporciona datos de Place Details
| Qué se utiliza en este ejemplo: API de Maps JavaScript | También disponible: API de Places (nueva) | Android | iOS |
Puedes compartir los detalles de Place Details que los usuarios deben conocer antes de visitar una de tus ubicaciones. Gracias a la variedad de estos detalles, como la información de contacto, el horario de atención, el estado de cierre temporal y las calificaciones y fotos de los usuarios, las personas sabrán exactamente qué esperar al visitar tu ubicación. Después de realizar una llamada a la API de Places (nueva), puedes filtrar y renderizar la respuesta en una ventana de información, una barra lateral web o de alguna otra manera que te guste.
Para enviar solicitudes de Place Details, necesitarás el ID de lugar de cada una de tus ubicaciones. Consulta la sección Obtén los ID de lugar para recuperar tales ID de tus ubicaciones.
Expande esta sección y mira videos para solicitar detalles de Place Details:
Obtén el horario de atención
Verifica los cierres
Controla los costos
En el siguiente ejemplo, se usa la clase Place de la biblioteca de Places de la API de Maps JavaScript para recuperar detalles de lugar y agregarlos a una ventana de información. Esta implementación utiliza una estrategia de ahorro de costos que consiste en activar una solicitud de Place Details solo cuando el usuario lo pide con un clic en el marcador, en lugar de recuperar tal información de antemano para todas las ubicaciones sin tener en cuenta el interés del usuario.
const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.14655 }, gmpClickable: true, }); const place = new google.maps.places.Place({ id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", }); const infowindow = new google.maps.InfoWindow(); marker.addEventListener("gmp-click", async () => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "rating", "websiteURI"], }); infowindow.setContent( "<div><strong>" + place.displayName + "</strong><br>" + place.formattedAddress + "<br>" + "Rating: " + place.rating + " stars<br>" + place.websiteURI + "</div>" ); infowindow.open({ map, anchor: marker, }); });
Muestra ubicaciones desde una vista de 45°
| Qué se utiliza en este ejemplo: API de Maps JavaScript | También disponible: Android | iOS |
Si brindas a los usuarios una vista aérea de tu ubicación, puedes ayudarlos a que tengan una idea más clara de cómo se ve tu negocio, lo cual los ayuda a encontrarlo. Cuando un usuario selecciona una sola ubicación para obtener más detalles, puede acercarse a ella y acceder a las imágenes satelitales disponibles desde un ángulo de 45°.
En la siguiente muestra de código, se configura el mapa en un nivel de zoom alto, un tipo de mapa compatible y un ángulo de inclinación con imágenes de 45° (si están disponibles). Los detalles sobre la disponibilidad de las imágenes de 45° se explican en la documentación.
function seeDetail(location) {
map.setCenter(location);
map.setZoom(19);
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
map.setTilt(45);
}Restablece la vista de mapa original
A menudo, los usuarios quieren alternar entre la vista detallada de una sola ubicación y la vista resumida de varias ubicaciones cercanas. Si deseas facilitar este proceso, agrega un objeto de escucha para detectar cuando el usuario abandona la vista detallada en las interacciones con el mapa o en la vista de lista. Por ejemplo, si se escucha el evento zoom_changed en el objeto map, esto indica que el usuario alejó la imagen manualmente desde la vista detallada o que llamó a otra función que actualizó el nivel de zoom. En esta muestra, alejar la imagen restablece el mapa a la inclinación y al tipo de mapa originales.
let originalMapTypeId = google.maps.MapTypeId.ROADMAP; map.addListener("zoom_changed", () => { const newZoom = map.getZoom()!; if (newZoom < 19) { map.setTilt(0); map.setMapTypeId(originalMapTypeId); } });
Identifica la ubicación del usuario
| Qué se utiliza en este ejemplo: API de Maps JavaScript | También disponible: Android | iOS |
El siguiente componente clave de cualquier localizador es identificar la ubicación de partida del usuario. De forma predeterminada, podrás usar los servicios de ubicación para dispositivos móviles y la ubicación geográfica del navegador web para solicitar permisos del usuario para establecer el origen como la ubicación actual del usuario. Sin embargo, es posible que el usuario deniegue esos permisos o que quiera establecer una ubicación diferente como punto de partida.
Hoy en día, los usuarios están acostumbrados a la funcionalidad de escritura anticipada de Autocomplete en la versión para usuarios finales de Google Maps. Esta funcionalidad se puede integrar en cualquier app con las bibliotecas de Places de Google Maps Platform en dispositivos móviles y la Web. Cuando un usuario escribe una dirección, Autocomplete llena el resto de la información mediante widgets. También puedes proporcionar tu propia funcionalidad de autocompletar usando directamente la API de Place Autocomplete Data.
Para agregar la biblioteca de Place Autocomplete a tu sitio, basta con ingresar un par de parámetros de consulta a la URL de secuencia de comandos de la API de Maps JavaScript. En el siguiente ejemplo, la adición corresponde a libraries=places,marker.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
A continuación, agrega un elemento contenedor a tu página en el que se agregará el widget PlaceAutocompleteElement.
<div id="autocomplete-container"></div>
Por último, inicializa el widget PlaceAutocompleteElement y agrégalo al contenedor. Si limitas las
predicciones de Place Autocomplete
con includedPrimaryTypes: ["geocode"], el widget se configurará
para aceptar direcciones, zonas, ciudades y códigos postales, de modo que los usuarios puedan utilizar cualquier
nivel de especificidad para describir su origen. Cuando un usuario selecciona una predicción, se activa el evento gmp-select y puedes llamar a place.fetchFields() para solicitar el campo location que contiene la latitud y la longitud del origen del usuario. Utilizarás estas coordenadas del mapa para volver a centrar el mapa y mostrar la relación de tus ubicaciones con el origen.
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // zoom to the selected location and add an advanced marker. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["location", "formattedAddress"], }); addUserLocation(place); }); }
En este ejemplo, una vez que el usuario seleccione la dirección, se ejecutará la función addUserLocation(). Esto toma la ubicación del resultado coincidente, mueve el mapa a esa ubicación y agrega un marcador avanzado.
function addUserLocation(place) { const pin = new google.maps.marker.PinElement({ glyphText: "C", }); // Add an advanced marker to the map. const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: place.location, }); marker.append(pin); // Pan and zoom the map to the marker. map.panTo(place.location); map.setZoom(12); }
Puedes ver la relación entre el usuario y cualquier ubicación en particular, como se muestra en la siguiente imagen.
Expande esta sección para ver videos explicativos sobre cómo agregar Place Autocomplete a tu app:
Sitio web
Apps para Android
Apps para iOS
Muestra la duración y la distancia del viaje hasta las ubicaciones más cercanas
| Qué se utiliza en este ejemplo: API de Routes | También disponible: Biblioteca de Routes de la API de Maps JavaScript |
Una vez que tengas la ubicación del usuario, puedes compararla con tus ubicaciones. Si haces esto con la función Compute Route Matrix de la API de Routes (o la clase RouteMatrix de la biblioteca de Routes de la API de Maps JavaScript), tus usuarios podrán seleccionar la ubicación más conveniente para ellos según la duración del viaje o la distancia de la ruta.
El hecho de que se muestren las ubicaciones cercanas a un usuario implica que estas ya se propagaron. Cuando utilizas tu propia base de datos de ubicaciones, la clave es asegurarse de que los datos estén en un formato compatible con los mapas, como GeoJSON, que se describe en el tema Capa de datos.
El modo estándar de organizar una lista de ubicaciones es por distancia. A menudo, esta distancia se calcula con una línea recta entre el usuario y la ubicación, lo cual puede ser un tanto impreciso. Dicha línea podría atravesar un río que no puede cruzarse o involucrar rutas muy congestionadas cuando otra ubicación podría ser más conveniente. Esto resulta importante cuando tienes varias ubicaciones a pocos kilómetros unas de las otras.
El método computeRouteMatrix toma una lista de ubicaciones de origen y destino, y muestra no solo la distancia de viaje, sino también el tiempo de viaje entre ellas. En el caso de un usuario, el origen sería su ubicación actual o su punto de partida preferido, mientras que los destinos serían las distintas ubicaciones.
Los orígenes y destinos se pueden especificar como pares de coordenadas, IDs de lugar o direcciones. Puedes usar computeRouteMatrix con preferencias de rutas, como TRAFFIC_AWARE, para mostrar los resultados en función de los tiempos de viaje actuales o futuros.
En el siguiente ejemplo, se llama al extremo computeRouteMatrix en la API de Routes, especificando el origen del usuario y los IDs de lugar de destino. En este ejemplo, se calcula la distancia y la duración del viaje desde el centro del mapa hasta tres oficinas de Google en Londres:
curl -X POST -d '{
"origins": [
{
"waypoint": {
"location": {
"latLng": {
"latitude": 51.493490,
"longitude": -0.097288
}
}
}
}
],
"destinations": [
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
}
},
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
}
},
{
"waypoint": {
"placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
}
}
],
"travelMode": "DRIVE",
"routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'La respuesta del servicio contiene la distancia (en metros) y la duración de cada par de origen y destino, de manera similar a la que se muestra en el siguiente ejemplo:
Expande esta sección para ver la respuesta de muestra:
[
{
"originIndex": 0,
"destinationIndex": 0,
"status": {},
"distanceMeters": 4540,
"duration": "924s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 1,
"status": {},
"distanceMeters": 5043,
"duration": "1044s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 2,
"status": {},
"distanceMeters": 6919,
"duration": "1357s",
"condition": "ROUTE_EXISTS"
}
]En la siguiente imagen, se muestran el origen (marcador C en color rojo) y los destinos en un mapa:
Las distancias de la línea recta y de la ruta real suelen diferir, tal como se ilustra en la siguiente tabla.
| Ubicación | Distancia en línea recta | Ruta con tráfico y tiempo |
|---|---|---|
| Ubicación A | 3.32 km | 4.5 km/15 minutos |
| Ubicación B | 3.20 km | 5.0 km/17 minutos |
| Ubicación C | 4.84 km | 6.9 km/23 minutos |
Si bien la ubicación B es la más cercana según la distancia, la ruta para llegar allí es más extensa y lleva más tiempo. Esto se debe a que se puede acceder a la ubicación A por autopista.
Tras hacer esta solicitud, puedes procesar las coincidencias para ordenar las respuestas según la duración del viaje. Puedes encontrar ejemplos de este tipo de función en el codelab del localizador.
Proporciona instrucciones sobre cómo llegar
| Qué se utiliza en este ejemplo: Biblioteca de Routes de la API de Maps JavaScript | También disponible: API de Routes Servicio web para usar en Android y iOS, ya sea directamente desde la aplicación o de forma remota a través de un servidor proxy |
Mostrarles a los usuarios las instrucciones sobre cómo llegar dentro de tu sitio o tus aplicaciones significa que no tendrán necesidad de navegar a ningún otro lugar; de esta manera, no se distraerán con otras páginas ni verán a tus competidores en el mapa. Con la API de Routes, también puedes solicitar rutas ecológicas para estimar el consumo de combustible o energía, y mostrar el impacto ambiental de un viaje.
La clase Route de la biblioteca de Routes de la API de Maps JavaScript también tiene métodos como createPolylines() y createWaypointAdvancedMarkers() que te permiten procesar los resultados y mostrarlos en un mapa.
A continuación, se incluye un ejemplo de cómo solicitar y mostrar una ruta en un mapa. Para obtener más información sobre el ejemplo, consulta Cómo obtener una ruta.
Para obtener más información sobre estas funciones de Maps, consulta la documentación de la API de Maps JavaScript o sigue el codelab paso a paso para compilar un localizador.
Ayuda a los usuarios a reservar citas
Cuando los usuarios consulten los detalles de Place Details de tu ubicación en un panel lateral, puedes ofrecerles la comodidad de reservar una cita mediante un clic en un botón, tal como se muestra en la siguiente imagen.
Existen varias maneras de habilitar esta función: (1) mediante la solución Locator Plus con la Herramienta de creación rápida, a fin de proporcionar esta funcionalidad desde el primer momento, y (2) mediante tu Perfil de Negocio. En esta sección, se describen estas opciones en detalle.
Cómo usar Locator Plus de la Herramienta de creación rápida
Puedes usar la solución Locator Plus con la Herramienta de creación rápida para importar rápidamente detalles de la empresa desde tu Perfil de Negocio. Una vez importados a la Herramienta de creación rápida, puedes habilitar los vínculos incorporados para reservar citas (cuando estén disponibles) de las ubicaciones de tu empresa a través de Reserva con Google. Incluso si no tienes un Perfil de Negocio asociado a una Cuenta de Google, puedes usar la Herramienta de creación rápida e incorporar vínculos para reservar de empresas que ya habilitaste con proveedores de reservas externos a través de Reserva con Google*.
*Reserva con Google solo está disponible en ciertos países o regiones donde las empresas trabajan con un proveedor de reservas admitido. Si te interesa Reserva con Google, pero no trabajas con un socio de Reserva con Google, pídele a tu proveedor que complete este formulario de interés y que consulte nuestra documentación para ver cómo puede comenzar a usar esta función. Si todavía no trabajas con un proveedor de reservas, puedes ver los proveedores aptos en la sección Reservas del administrador del Perfil de Negocio.
Cómo utilizar el Perfil de Negocio para habilitar la reserva de citas
Cuando administras tu presencia en línea con el Perfil de Negocio, las ubicaciones de la empresa que creas se asocian a los ID de lugar de Google Maps Platform para habilitar la funcionalidad de mapeo integrada con los datos de la empresa.
Las API del Perfil de Negocio te permiten crear acciones, como la reserva de citas, que puedes recuperar y mostrar en tus apps, pero se requieren algunos pasos manuales para habilitarlas, tal como se describe a continuación.
Cuando los usuarios consultan los detalles de Place Details de una de tus ubicaciones en el panel lateral, puedes proporcionarles un vínculo para reservar una cita. En esta sección, se describe cómo hacerlo.
-
Crea un recurso
placeActionLinkde las API del Perfil de Negocio para la ubicación cuyo tipo seaAPPOINTMENT,ONLINE_APPOINTMENToDINING_RESERVATION. EseplaceActionLinkserá el objeto que utilizarás como vínculo para reservar citas en el panel lateral. (Si ya creaste el vínculo de acción para citas que deseas, omite este paso y continúa con el siguiente). Este es un ejemplo de respuesta de una operación POST exitosa deplaceActionLinks.create:{ "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/reservation-uri", "placeActionType": "DINING_RESERVATION", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } -
Busca la ubicación del Perfil de Negocio asociada con el ID de lugar de Google Maps Platform.
Cuando los usuarios consultan Place Details, acceden a los detalles de un ID de lugar de Google Maps Platform. El ID de lugar está asociado con un ID de ubicación del Perfil de Negocio, por lo que debes buscar este último según el ID de lugar del mapa a fin de recuperar y mostrar el vínculo para reservar citas que creaste. Realiza las siguientes llamadas a las API del Perfil de Negocio:
- Enumera las cuentas de tu proyecto.
- Enumera todas las ubicaciones incluidas en una cuenta.
- En las ubicaciones de la cuenta, el elemento
LocationKeycontiene el ID de lugar de Google Maps Platform, que puedes comparar con el de la ubicación que se está viendo.
-
Con el ID de ubicación, puedes obtener el vínculo de acción que desees. Si quieres recuperar un
placeActionLinkde cita ya existente, genera una lista de losplaceActionLinksactuales de la ubicación y filtra porplaceActionTypepara encontrar el vínculo de cita que deseas utilizar (APPOINTMENT,ONLINE_APPOINTMENToDINING_RESERVATION).En el siguiente ejemplo, se muestra un objeto
placeActionLinkdel tipo APPOINTMENT en la respuesta de la llamada a LIST.{ "placeActionLinks": [ { "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/", "placeActionType": "APPOINTMENT", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } ] } - Crea un
<div>en el panel lateral y propágalo con datos relevantes del objetoplaceActionLink, especialmente el URI del vínculo para reservar citas.
Otras alternativas para agregar vínculos de citas
Si no administras un Perfil de Negocio o no deseas usar la solución Locator Plus con la Herramienta de creación rápida, consulta tu plataforma de reserva de citas para ver la documentación sobre cómo incorporar un widget de reserva en un sitio web o app. Otra opción es usar Google Cloud, como Cloud Spanner para la administración del inventario (video).
Cómo mostrar ofertas locales
En el panel lateral de Place Details de una ubicación, puedes mostrar las ofertas locales para que los usuarios hagan clic en ellas. La API de Google Mi Negocio te permite crear y recuperar "publicaciones" (como las ofertas locales) que están asociadas con tus ubicaciones. La siguiente imagen brinda un ejemplo de una oferta local en un panel lateral de Place Details.
(El diagrama de arquitectura de la sección Herramienta de creación rápida muestra las tecnologías disponibles para agregar ofertas a tu localizador).
Debido a que las ofertas locales están relacionadas con las ubicaciones, deberás buscar el ID de ubicación del Perfil de Negocio que está asociado con el ID de lugar de Google Maps Platform que corresponda a la ubicación que los usuarios están consultando.
Cuando tengas el ID de ubicación del Perfil de Negocio, podrás recuperar la oferta relevante como un localPost para mostrarla en el panel lateral de Place Details. A continuación, se indican los pasos que debes seguir:
- Con la API de Google My Business,
crea las publicaciones de ofertas que desees
mostrar (del tipo
OFFER). -
Busca la ubicación del Perfil de Negocio o el ID de ubicación asociado con el ID de lugar del mapa.
Cuando los usuarios consultan Place Details, acceden a los detalles de un ID de lugar de Google Maps Platform. El ID de lugar está asociado con un ID de ubicación del Perfil de Negocio, por lo que debes buscar este último según el ID de lugar del mapa para recuperar y mostrar el vínculo de oferta local correspondiente a tu ubicación. Realiza las siguientes llamadas a las API del Perfil de Negocio:
- Enumera las cuentas de tu proyecto.
- Enumera todas las ubicaciones incluidas en una cuenta.
- En las ubicaciones de la cuenta,
LocationKeycontiene el ID de lugar del mapa, que puedes comparar con el de la ubicación que se está viendo.
A continuación, se incluye un ejemplo de solicitud para los detalles de una ubicación en las API del Perfil de Negocio:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
La respuesta contiene un campo
locationKey, que es el ID de lugar que puedes utilizar con las solicitudes de Google Maps Platform.Expande esta sección para ver la respuesta de muestra.
{ "name": "accounts/111098884960588804666/locations/15899957830169237700", "locationName": "Sushi Sushi", "primaryPhone": "+49 2222 22222", "primaryCategory": { "displayName": "Restaurant", "categoryId": "gcid:restaurant", }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": "09:00", "closeDay": "MONDAY", "closeTime": "09:10" }, { "openDay": "TUESDAY", "openTime": "11:30", "closeDay": "TUESDAY", "closeTime": "24:00" } ] }, "locationKey": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "locationState": { "isGoogleUpdated": true, "canUpdate": true, "canDelete": true, "isVerified": true, "isPublished": true, "canHaveFoodMenus": true }, "attributes": [ { "attributeId": "has_delivery", "valueType": "BOOL", "values": [ false ] }, { "attributeId": "requires_masks_customers", "valueType": "BOOL", "values": [ true ] }, { "attributeId": "url_order_ahead", "valueType": "URL", "urlValues": [ { "url": "https://example.com/" }, ] }, { "attributeId": "pay_credit_card_types_accepted", "valueType": "REPEATED_ENUM", "repeatedEnumValue": { "setValues": [ "visa" ], "unsetValues": [ "american_express" ] } } ], "address": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } } -
Ahora que tienes el ID de ubicación, puedes obtener la oferta que deseas. Si quieres recuperar una Publicación de oferta existente, genera una lista de las
localPostsactuales para la ubicación y filtra por el atributotopicTypede tipoOFFERpara encontrar el contenido de la oferta que deseas utilizar.A continuación, se incluye un ejemplo de solicitud que permite enumerar las Publicaciones locales activas para una ubicación:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
El siguiente ejemplo muestra una publicación
localPostcon el tipoOFFERen la respuesta.Expande esta sección para ver la respuesta de muestra.
{ "localPosts": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680", "languageCode": "en", "summary": "Buy One Get One Free on all order-ahead bento boxes today!", "state": "LIVE", "event": { "title": "Bento BOGO", "schedule": { "startDate": { "year": 2020, "month": 1, "day": 20 }, "startTime": {}, "endDate": { "year": 2021, "month": 1, "day": 21 }, "endTime": {} } }, "updateTime": "2020-09-11T10:56:22.594Z", "createTime": "2020-09-11T10:56:22.594Z", "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680", "media": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS", "mediaFormat": "PHOTO", "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS" } ], "topicType": "OFFER", "offer": { "couponCode": "BOGO-JET-CODE", "redeemOnlineUrl": "https://www.example.com/redeem", "termsConditions": "Offer only valid for order-ahead orders placed online." } }, ], } - Crea un
<div>en el panel lateral y propágalo con datos relevantes del objetolocalPost.
Personaliza tu mapa
Puedes cambiar la apariencia y los detalles de tu mapa de diferentes formas. Por ejemplo, puedes hacer lo siguiente:
- Crea tus propios marcadores personalizados para reemplazar los pines predeterminados del mapa.
- Cambia los colores de los elementos del mapa para reflejar tu marca.
- Controla qué lugares de interés mostrar (atracciones, comida, alojamiento, etc.) y su densidad. Esto te permitirá centrar la atención de los usuarios en tus ubicaciones y, a la vez, destacar los puntos de referencia que los ayudarán a llegar a tu ubicación más cercana.
Crea marcadores de mapa personalizados
Puedes personalizar tus marcadores avanzados cambiando el color predeterminado del fondo, el borde o el glifo del marcador (por ejemplo, para indicar si una ubicación está abierta), reemplazando el marcador por una imagen gráfica personalizada, como el logotipo de tu marca, o creando marcadores personalizados de HTML y CSS. Las ventanas de información pueden proporcionar datos adicionales a los usuarios, como el horario de atención, el número de teléfono o fotos.
A continuación, se incluye un mapa de ejemplo con marcadores gráficos personalizados. (Consulta el código fuente en el tema de marcadores gráficos personalizados de la API de Maps JavaScript).
Para obtener información detallada, consulta la documentación sobre marcadores avanzados de JavaScript (Web), Android y iOS.
Aplica diferentes diseños a tu mapa
Google Maps Platform te permite aplicar diferentes diseños a tu mapa, de modo que puedas afianzar tu marca y facilitar que los usuarios encuentren la ubicación más cercana y lleguen a ella lo más rápido posible. Por ejemplo, puedes cambiar los colores del mapa para que combinen con tu marca y controlar los lugares de interés que se muestran a los usuarios a fin de reducir las distracciones. Google Maps Platform también proporciona una serie de plantillas de mapa para principiantes, algunas de las cuales están optimizadas para diferentes industrias, como Viajes, Logística, Agencias inmobiliarias y Venta minorista.
Puedes crear o modificar diseños de mapa en la página Diseños de mapa de la consola de Google Cloud, en tu proyecto.
Expande esta sección para ver animaciones que ilustran cómo crear y aplicar diseños de mapa en la consola de Cloud:
Estilos de mapa según la industria
En esta animación, se muestran los estilos de mapa predefinidos que puedes utilizar según la industria. Estos ofrecen un punto de partida óptimo para cada tipo de industria. Por ejemplo, el diseño de mapa Venta minorista reduce la cantidad de lugares de interés en el mapa para que los usuarios puedan enfocarse en tus ubicaciones y en los puntos de referencia y, así, ayudarlos a llegar a la ubicación más cercana con la mayor rapidez y certeza posibles.
Controla los lugares de interés
En esta animación, se establece el color de los marcadores de lugares de interés y se aumenta su densidad en el diseño de mapa. Cuanto mayor es la densidad, más marcadores de lugares de interés aparecen en el mapa.
Cada diseño de mapa tiene su propio ID. Una vez que publiques un diseño en la consola de Cloud, deberás hacer referencia a ese ID de mapa en tu código, lo que te permitirá actualizar el diseño de mapa en tiempo real sin tener que refactorizar la aplicación. El nuevo diseño aparecerá automáticamente en la aplicación existente y se utilizará en todas las plataformas. En los siguientes ejemplos, se muestra cómo agregar un ID de mapa a una página web con la API de Maps JavaScript.
Al incluir uno o más map_ids en la URL de secuencia de comandos, la API de Maps JavaScript pone automáticamente esos estilos a disposición para que, cuando los llames en tu código, el mapa se pueda renderizar más rápido.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a">
</script>
El siguiente código muestra un mapa con estilo en la página web. (No se muestra el elemento HTML <div id="map"></div> que indica dónde aparecerá el mapa en la página).
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
Obtén más información para incorporar el diseño de mapas basado en Cloud en JavaScript (Web), Android y iOS.
Obtén información de uso valiosa con las estadísticas
Si utilizas las estadísticas, puedes obtener información valiosa sobre cómo los usuarios interactúan con tu localizador. En esta sección, se proporcionan indicaciones para configurar y supervisar Google Analytics y las estadísticas del Perfil de Negocio a fin de realizar un seguimiento de los datos que más te interesan. Si eres usuario de Locator Plus con la Herramienta de creación rápida, un panel de análisis te permite examinar los datos de forma anonimizada y generar estadísticas para tener una idea clara de cómo los visitantes de tu sitio interactúan con tu localizador de tiendas.
Para acceder a este informe, ve a la sección de informes de participación de la consola de Cloud. Para obtener más detalles sobre este informe, consulta Informes de participación.
Dado que Google Analytics ofrece muchas funciones, no proporcionaremos información integral sobre su configuración y uso. En su lugar, te indicamos cuál es la documentación relevante que debes consultar para obtener instrucciones adicionales y más información, al tiempo que destacamos las consideraciones de estadísticas clave para tu app de localizador.
Configura Google Analytics
Si ya utilizas Google Analytics con tu app, puedes omitir esta sección.
A continuación, se incluye un ejemplo de una "etiqueta global" que puedes pegar en tu sitio para habilitar Google Analytics.
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/ gtag/js?id=G-XR5B5D4NW0"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XR5B5D4NW0'); </script>
Ya sea que uses Google Tag Manager o que agregues Google Analytics directamente a tu sitio, es fundamental que sepas cómo utilizar tu implementación de Google Analytics para hacer lo siguiente:
- Generar interacciones de los usuarios, como clics, que se pueden medir independientemente de las páginas vistas de un sitio web (eventos)
- Ver datos sin procesar (métricas) agrupados de forma significativa (dimensiones o dimensiones personalizadas)
Utiliza eventos personalizados
A continuación, se incluye un ejemplo de cómo definir un evento personalizado en tu localizador:
gtag('event', 'location', { 'method': 'address' });
Es importante que tu event y tu method tengan nombres que sean lo suficientemente claros como para que puedas comprender los eventos que figuran en los informes. Actívalos para las interacciones específicas que desees medir, como cuando un usuario selecciona una dirección desde la lista desplegable de Autocomplete que se muestra en la siguiente imagen.
Puedes enviar a Google Analytics la siguiente llamada de seguimiento que utiliza el evento y el método que definiste. (Mostraremos cada parámetro de búsqueda en una línea diferente para que la lectura sea sencilla).
https://www.google-analytics.com/g/collect?v=2 &tid=G-XR5B5D4NW0 >m=2oe550 &_p=64678170 &sr=1920x1200 &ul=fr &cid=489856786.1598861364 &_s=2 &dl=http%3A%2F%2.storelocator.html &dt=Store%20Locator &sid=1620827159 &sct=1 &seg=1 &en=location &_et=6032 &ep.method=address
En la siguiente imagen, se muestra cómo aparece esa llamada de Google Analytics en la vista de inspección del navegador, en la pestaña Network. (Haz clic para agrandar la imagen).
Puedes verificar que las etiquetas de tu evento personalizado se capturen correctamente. Para ello, consulta la vista "Tiempo real" (Real-time) en Google Analytics. Por ejemplo, el evento "ubicación" ("location"), que anteriormente se configuró para Place Autocomplete, aparece en Google Analytics tal como se muestra en las siguientes imágenes.
Como alternativa, puedes supervisar eventos en tiempo real utilizando DebugView, según se muestra en la siguiente imagen. Ten en cuenta que debes esperar 24 horas para poder acceder a un informe de eventos completo en la sección Participación > Eventos (Engagement > Events) de Google Analytics.
Además, puedes desarrollar y medir estrategias para generar más tráfico presencial a tus ubicaciones físicas desde tu app de localizador. Por ejemplo, Google Analytics ofrece la solución Visitas a tienda en Analytics, que vincula las estadísticas de las visitas a una tienda física (medidas por Google Ads) con las estadísticas de tu localizador. También puedes desarrollar tus propias estrategias "de la app a la ubicación", como ofertas en línea que se puedan canjear en tus ubicaciones físicas.
Métricas del Perfil de Negocio
Además de realizar un seguimiento de los eventos, las métricas y las dimensiones que te interesan a través de Google Analytics, el Perfil de Negocio también cuenta con sus propias métricas. Por ejemplo, si agregas vínculos de ofertas locales y para reservar citas a tu localizador, puedes obtener métricas sobre las vistas y los clics.
El siguiente ejemplo de solicitud a las API del Perfil de Negocio requiere varios tipos de métricas. Para realizar un seguimiento de los clics en las ofertas, LOCAL_POST_VIEWS_SEARCH y LOCAL_POST_ACTIONS_CALL_TO_ACTION serían las métricas más relevantes.
Expande esta sección para ver la solicitud de muestra.
POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights
Body:
{
"locationNames": [
"accounts/111098884960528804666/locations/15899957830169237700"
],
"basicRequest": {
"metricRequests": [
{
"metric": "QUERIES_DIRECT"
},
{
"metric": "QUERIES_INDIRECT"
},
{
"metric": "VIEWS_MAPS"
},
{
"metric": "VIEWS_SEARCH"
},
{
"metric": "ACTIONS_DRIVING_DIRECTIONS"
},
{
"metric": "LOCAL_POST_VIEWS_SEARCH"
},
{
"metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION"
}
],
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
}
}Expande esta sección para ver la respuesta de muestra.
{
"locationMetrics": [
{
"locationName": "accounts/111098884960528804666/locations/15899957830169237700",
"timeZone": "Asia/Singapore",
"metricValues": [
{
"metric": "QUERIES_DIRECT",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "82"
}
},
{
"metric": "QUERIES_INDIRECT",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "1493"
}
},
{
"metric": "VIEWS_MAPS",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "1571"
}
},
{
"metric": "VIEWS_SEARCH",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "631"
}
},
{
"metric": "ACTIONS_DRIVING_DIRECTIONS",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "3"
}
},
{
"metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "42"
}
},
{
"metric": "LOCAL_POST_VIEWS_SEARCH",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "11"
}
}
]
}
]
}
La respuesta contiene las métricas. Estas son las más destacadas:
- 1571 vistas de la ubicación en Google Maps
- 631 vistas de la ubicación en la Búsqueda de Google
- 3 solicitudes de rutas en auto para ir hasta la ubicación
- 42 clics en ofertas
LOCAL_POST_ACTIONS_CALL_TO_ACTION - 11 vistas de las Publicaciones en Google en la Búsqueda de Google.
Otra opción de métrica implica usar la función Reserva con Google para crear vínculos de acciones. Cuando los usuarios hacen clic en vínculos de acciones que se crean mediante Reserva con Google, puedes registrar esas acciones en Google Analytics, lo cual te permite realizar un seguimiento de las conversiones en esta última herramienta. Consulta la documentación sobre el seguimiento de conversiones para obtener más información.
Sin importar la estrategia de métricas que utilices, realizar mediciones es mucho más que analizar cuál es tu rendimiento en relación con tus KPI. Los números también te permiten entender de qué manera estas mejoras del localizador repercuten en tu negocio. Asimismo, puedes comparar las métricas de Google Analytics en tu localizador con las del Perfil de Negocio. Por ejemplo, si comparas estas métricas, puedes ver cuántos clientes obtienen instrucciones sobre cómo llegar desde tu localizador y Google Maps para luego visitar tus ubicaciones físicas.
Mejora Locator Plus
Según las necesidades de tu empresa o tus usuarios, puedes mejorar aún más la experiencia de estos últimos.
Envía las instrucciones sobre cómo llegar a dispositivos móviles
Para que los usuarios puedan llegar a una ubicación de manera aún más sencilla, puedes enviarles un SMS o correo electrónico con las instrucciones. Cuando hagan clic allí, se iniciará la app de Google Maps si la tienen instalada en su dispositivo o se cargará maps.google.com en su navegador web. Ambas experiencias ofrecen a los usuarios la opción de utilizar la navegación paso a paso, incluidas las indicaciones por voz, para llegar al destino.
Utiliza las URL de Maps para redactar una URL de instrucciones sobre cómo llegar similar a la siguiente, que contenga esta información codificada: el nombre del lugar como el parámetro destination y el ID de lugar como el parámetro destination_place_id. Redactar o utilizar las URL de Maps no implica ningún costo, por lo que no hace falta que contengan una clave de API.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
De manera opcional, puedes proporcionar un parámetro de consulta origin con el mismo formato de dirección que el destino. Sin embargo, si lo omites, las instrucciones comenzarán desde la ubicación actual del usuario, que puede ser diferente de la ubicación en la que estaba usando tu app de Locator Plus. Las URLs de Maps proporcionan opciones de parámetros de búsqueda adicionales, como travelmode y dir_action=navigate, para iniciar las instrucciones con la navegación activada.
Este vínculo, en el cual se puede hacer clic, amplía la URL de ejemplo anterior y establece origin como un estadio de fútbol londinense y utiliza travelmode=transit para proporcionar la ruta en transporte público al destino.
Para enviar un SMS o correo electrónico con esta URL, te recomendamos utilizar una aplicación de terceros, como twilio. Si utilizas App Engine, puedes recurrir a empresas de terceros para enviar tales mensajes. Para obtener más información, consulta el artículo Envía mensajes con servicios de terceros.
Muestra Street View para ayudar a los usuarios a visualizar las ubicaciones
Para muchas ubicaciones alrededor del mundo, se puede utilizar Street View a fin de mostrar su exterior a los usuarios, de modo que sepan cómo luce antes de llegar. Puedes proporcionar imágenes de Street View de forma interactiva (Web) o estática (API), según desees que los usuarios puedan ver o no el área en 360°. Street View también está disponible para Android y iOS.
Determina la ubicación de los usuarios con Geolocation
En la mayoría de los casos, puedes determinar dónde se encuentra un usuario con los servicios de ubicación integrados en sus dispositivos o navegadores. Proporcionamos un ejemplo de cómo usar la función de ubicación geográfica HTML5 de un navegador para mostrar la ubicación geográfica de un usuario o dispositivo en un mapa de Google, y hay documentación sobre cómo solicitar permisos y obtener la ubicación en Android y iOS. Sin embargo, puede haber situaciones en las que desees utilizar un localizador alternativo, por ejemplo, si los servicios de ubicación del dispositivo están inhabilitados y te preocupa que se falsifique la información sobre dónde se encuentra el dispositivo.
La API de Geolocation es una interfaz del servidor que muestra una ubicación y un radio de precisión según la información de torres de telefonía celular y nodos de Wi-Fi que el cliente puede detectar. Puedes utilizar Geolocation como mecanismo de respaldo para determinar dónde se encuentra un usuario o a fin de contrastar la información proporcionada por el dispositivo.
Combina los datos de ubicación personalizados con Place Details
En la sección anterior titulada Proporciona detalles de Place Details, explicamos cómo utilizar estos datos para brindar a los usuarios información precisa sobre tus ubicaciones, como el horario de atención, fotos y opiniones.
Es útil comprender los precios y los niveles de SKU de los diferentes campos de datos en la API de Places (nueva). Para administrar tus costos, una estrategia es combinar la información que ya tienes sobre tus ubicaciones con los datos nuevos de Google Maps, como cierres temporales, horario especial y calificaciones, fotos y opiniones de los usuarios. Si ya tienes la información de contacto de tus ubicaciones, no necesitarás incluir esos campos en la solicitud de Place Details, sino que podrás limitar tu máscara de campo para recuperar solo los campos que desees mostrar.
Es posible que tengas tus propios datos del lugar para proporcionar o utilizar en vez de los detalles de Place Details. En el codelab del localizador para varias plataformas, se proporciona un ejemplo de cómo utilizar GeoJSON con una base de datos para almacenar y recuperar tus propios detalles de ubicación.