Guía de implementación de Product Locator

Descripción general

API para , iOS y la Web

Google Maps Platform está disponible para Android, iOS y la Web (JS o TS), y también ofrece varias API de servicios web que permiten obtener información acerca de lugares, instrucciones sobre cómo llegar, y distancias. Las muestras de esta guía se redactaron para una sola plataforma, pero se proporcionan vínculos de documentación para poder implementarlas en otras plataformas.

Cuando los usuarios ven tus productos en línea, quieren encontrar la manera que sea mejor y más conveniente para hacer el pedido. La guía de implementación de Product Locator y las sugerencias de personalización que proporcionamos en este tema son las recomendadas como la mejor combinación de las API de Google Maps Platform para crear excelentes experiencias del usuario en el localizador de productos.

Con las indicaciones de esta guía, puedes ayudar a que los clientes vean la información detallada que necesitan para encontrar tus productos y darles instrucciones sobre cómo llegar a la tienda que tiene su artículo, ya sea en automóvil, bicicleta, a pie o en transporte público.

Diagrama de arquitectura
Diagrama de arquitectura (haz clic para ampliar)

Habilita las API

Para implementar el Product Locator, debes habilitar las siguientes API en Google Cloud Console: Los siguientes hipervínculos te envían a Google Cloud Console para habilitar cada API en el proyecto seleccionado:

Para obtener más información sobre la configuración, consulta Cómo comenzar a utilizar Google Maps Platform.

Secciones de la guía de implementación

A continuación, se detallan las implementaciones y personalizaciones que abordaremos en este tema.

  • El ícono de marca de verificación es un paso principal de la implementación.
  • El ícono de estrella indica las personalizaciones opcionales pero recomendadas para mejorar la solución.
Cómo asociar las ubicaciones de las tiendas con los lugares de Google Maps Platform Haz coincidir una ubicación de la tienda con un lugar en Google Maps Platform.
Cómo identificar 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.
Cómo identificar las tiendas más cercanas Calcula el tiempo 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, en transporte público o en bicicleta.
Muestra la información de la tienda Muestra información con muchos datos sobre tus tiendas para que los usuarios puedan navegar hacia ellas con mayor facilidad.
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.
Envía las instrucciones sobre cómo llegar a dispositivos móviles Además de mostrar las instrucciones sobre cómo llegar en tu página web, puedes enviarlas al teléfono de un usuario para su navegación con Google Maps sobre la marcha.
Muestra tus ubicaciones en un mapa interactivo Crea marcadores de mapa personalizados para destacar tus ubicaciones y define el estilo del mapa de modo que combine con los colores de tu marca. Muestra (o bien, oculta) lugares de interés específicos en tu mapa para ayudar a los usuarios a orientarse mejor y controla la densidad de estos marcadores a fin de evitar la saturación de información.
Combina los datos de ubicación personalizados con la información de Place Details Combina tus propios datos de ubicación personalizados con la información de Place Details para ofrecerles a los usuarios un excelente conjunto de datos que los ayude a tomar decisiones.

Cómo asociar las ubicaciones de las tiendas con los lugares de Google Maps Platform

Obtén los ID de lugar

Qué se utiliza en este ejemplo: API de Places También disponible: JavaScript

Posiblemente tengas una base de datos de tus tiendas con información básica, como el nombre de esa ubicación, su dirección y su número de teléfono, y quieres asociarla con un lugar en Google Maps Platform como un conjunto de destinos finales en los que los usuarios puedan retirar productos. Para recuperar la información que Google Maps Platform tiene sobre ese lugar, incluidas las coordenadas geográficas y los datos contribuidos por usuarios, debes encontrar el ID de lugar correspondiente a cada una de las tiendas en tu base de datos. Puedes llamar gratis al extremo Find Place en Place Search de la API de Places y solicitar solo el campo place_id.

A continuación, se muestra un ejemplo de cómo solicitar el ID de lugar de la oficina de Google en Londres:

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

Puedes almacenar este ID de lugar en tu base de datos junto con el resto de los datos de tu tienda y usarlo como una forma eficiente de solicitar información sobre la tienda. A continuación, se indica cómo utilizar el ID de lugar para geocodificar ubicaciones, recuperar información de Place Details y solicitar instrucciones sobre cómo llegar allí.

Geocodifica tus ubicaciones

Qué se utiliza en este ejemplo: API de Geocoding También disponible: JavaScript

Si tu base de datos de tiendas tiene direcciones, pero no coordenadas geográficas, utiliza la API de Geocoding para obtener la latitud y longitud de esa dirección a fin de calcular qué tiendas están más cerca de tu cliente. Puedes geocodificar la tienda en el lado del 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

Cómo identificar la ubicación del usuario

Qué se utiliza en este ejemplo: Biblioteca de Places Autocomplete de la API de Maps JavaScript También disponible: Android | iOS

Un componente clave de Product Locator identifica la ubicación inicial de tu usuario. Puedes ofrecer dos opciones para que el usuario especifique su ubicación inicial: puede escribir el origen de su búsqueda u otorgar permisos a la ubicación geográfica incluida en el navegador web o los servicios de ubicación móvil.

Cómo procesar las entradas escritas con autocompletado

Hoy en día, las personas están acostumbradas 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 aplicación 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 a través del uso de widgets. También puedes proporcionar tu propia funcionalidad de autocompletar utilizando directamente las bibliotecas de Places.

Funcionalidad de autocompletado de direcciones
Funcionalidad de autocompletado de direcciones (haz clic para ampliar)

En el siguiente ejemplo, agrega el parámetro libraries=places a la URL del script de la API de Maps JavaScript para agregar la biblioteca de Place Autocomplete a tu sitio.

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

A continuación, agrega un cuadro de texto a tu página para la entrada del usuario:

<input id="autocomplete" placeholder="Enter
  starting address, city, or zip code" type="text"></input>

Por último, debes inicializar el servicio de Place Autocomplete y vincularlo al cuadro de texto mencionado. Si limitas las predicciones de Place Autocomplete a los tipos de geocódigo, el campo de entrada se configurará para aceptar direcciones, áreas, ciudades y códigos postales, de modo que los usuarios puedan utilizar cualquier nivel de especificidad para describir su origen. Asegúrate de solicitar el campo geometry para que la respuesta incluya la latitud y longitud del origen del usuario. Utilizarás estas coordenadas del mapa para indicar la relación de tus ubicaciones con el origen.

// Create the autocomplete object, restricting the search predictions to
// geographical location types.
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("autocomplete"),
{ types: ["geocode"],
  componentRestrictions: {'country': ['gb']},
  fields: ['place_id', 'geometry', 'formatted_address'] }
);
// When the user selects an address from the drop-down
// zoom to the select location and add a marker.
autocomplete.addListener("place_changed", searchFromOrigin);
}

En este ejemplo, una vez que el usuario selecciona la dirección, se inicia la función searchFromOrigin(). Esto toma la geometría del resultado coincidente que es la ubicación del usuario y, luego, busca las ubicaciones más cercanas basadas en esas coordenadas como el origen, tal como se explica en la sección Cómo identificar las tiendas más cercanas.

Visualización de las opciones de ubicación
Se muestran las opciones de ubicación (haz clic para ampliar)

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

Usar la ubicación geográfica del navegador

Para solicitar y controlar la ubicación geográfica del navegador HTML5, consulta cómo habilitar una ventana Usar mi ubicación:

Permiso del navegador para la ubicación del usuario
Solicitud de permiso del navegador web (haz clic para ampliar)

Cómo identificar las tiendas más cercanas

Qué se utiliza en este ejemplo: Servicio de Distance Matrix la API de Maps JavaScript También disponible: API de Distance Matrix

Una vez que tienes la ubicación del usuario, puedes compararla con las ubicaciones de tus tiendas. Si haces esto con el servicio de Distance Matrix 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 y la distancia de la ruta.

El modo estándar de organizar una lista de ubicaciones es por distancia. Este valor suele calcularse 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 servicio de Distance Matrix de la API de Maps JavaScript toma una lista de ubicaciones de origen y destino y muestra no solo la distancia de viaje, sino también el tiempo entre ellas. En el caso de un usuario, el origen sería el lugar donde se encuentra actualmente o el punto de partida deseado, mientras que los destinos serían las distintas ubicaciones. Los orígenes y destinos pueden especificarse como pares de coordenadas o direcciones. Se establecen las coincidencias con estas últimas cuando se llama al servicio. Puedes usar el servicio de Distance Matrix de la API de Maps JavaScript con parámetros adicionales para mostrar los resultados en función de los tiempos de viaje actuales o futuros.

En el siguiente ejemplo, se llama al servicio de Distance Matrix de la API de Maps JavaScript y se especifica el origen del usuario y 25 ubicaciones de tiendas al mismo tiempo.

function getDistances(place) {
  let distanceMatrixService = new google.maps.DistanceMatrixService();
  const origins = [place];
  return new Promise((resolve, reject) => {
    const callback = (response, status) => {
      if (status === google.maps.DistanceMatrixStatus.OK && response) {
        resolve(response);
      } else {
        reject(status);
      }
    };
    distanceMatrixService.getDistanceMatrix(
      {
        origins,
        destinations: stores.slice(0, 25).map((store) => store.location),
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
      },
      callback
    );
  });
}

function update(location) {
  if (!location) {
    return;
  }

  // ...

  // sort by spherical distance
  stores.sort((a, b) => {
    return (
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(a.location),
        location
      ) -
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(b.location),
        location
      )
    );
  });

  // display travel distance and time
  getDistances(location)
    .then((response) => {
      for (let i = 0; i < response.rows[0].elements.length; i++) {
        stores[i].address = response.destinationAddresses[i];
        stores[i].travelDistance = response.rows[0].elements[i].distance.value;
        stores[i].travelDistanceText =
          response.rows[0].elements[i].distance.text;
        stores[i].travelDuration = response.rows[0].elements[i].duration.value;
        stores[i].travelDurationText =
          response.rows[0].elements[i].duration.text;
      }
    })
    .finally(() => {
      renderCards(stores);
      autocompleteInput.disabled = false;
      isUpdateInProgress = false;
    });
}

Para cada ubicación cercana, puedes mostrar el estado del stock del producto según tu base de datos de inventario.

Muestra la información de la tienda

Qué se utiliza en este ejemplo: Biblioteca de Places de la API de Maps JavaScript También disponible: SDK de Places para Android | SDK de Places para iOS | API de Places

Puedes compartir una variedad de detalles de Place Details, como la información de contacto, el horario de atención y el estado de apertura actual, para ayudar a los clientes a elegir su ubicación preferida o finalizar su pedido.

Después de realizar una llamada a la API de Maps JavaScript para obtener Place Details, puedes filtrar y renderizar la respuesta.

Visualización de las opciones de tiendas
Se muestran las opciones de tiendas (haz clic para ampliar)

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.

La siguiente solicitud a Place Details devuelve la dirección, las coordenadas, el sitio web, el número de teléfono, la calificación y el horario del ID de lugar de Google Londres:

var request = {
  placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
  fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};

service = new google.maps.places.PlacesService(map); service.getDetails(request, callback);

function callback(place, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { createMarker(place); } }


Mejora el Product Locator

Según las necesidades de tu empresa o tus usuarios, puedes mejorar aún más la experiencia de estos últimos.

Proporciona instrucciones sobre cómo llegar

Qué se utiliza en este ejemplo: Servicio de Directions de la API de Maps JavaScript También disponible: Servicio web de la API de Directions para utilizar en Android y en iOS, ya sea directamente desde la app o de forma remota a través de un servidor proxy

Si les muestras a los usuarios las instrucciones sobre cómo llegar dentro de tu sitio o tus aplicaciones, no tendrán que abandonar tu plataforma; así, no se distraerán con otras páginas ni verán a tus competidores en el mapa. Incluso podrías mostrar las emisiones de carbono del medio de transporte específico y mostrar el impacto de cualquier viaje en particular mediante un conjunto de datos de carbono que puedas tener.

El servicio de Directions también tiene funciones que te permiten procesar los resultados y mostrarlos fácilmente en un mapa.

A continuación, se incluye un ejemplo de cómo mostrar un panel con las instrucciones sobre cómo llegar. Para obtener más información sobre este ejemplo, consulta la sección Muestra instrucciones de texto.

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 sobre cómo llegar comenzarán desde la ubicación actual del usuario, que puede diferir del lugar donde utilizaba tu app de Product Locator. Las URL de Maps proporcionan opciones adicionales de parámetros de búsqueda, como travelmode y dir_action=navigate, para iniciar dichas instrucciones con la navegación activada.

Este vínculo en el cual se puede hacer clic, que amplía la URL del ejemplo anterior, 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, actualmente 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 tus ubicaciones en un mapa interactivo

Utiliza mapas dinámicos

Qué se utiliza en este ejemplo: API de Maps JavaScript También disponible: Android | iOS

Los localizadores son una parte importante de la experiencia del usuario. Sin embargo, algunos sitios pueden carecer hasta de un simple 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 a fin de obtener la información que necesitan. En su lugar, puedes mejorar esta experiencia si incorporas mapas en tus aplicaciones y los personalizas.

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. Esto se logra mediante la vinculación del siguiente script en tu página HTML.

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></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 de segmentación en cuestión. 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 el artículo 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 cómo utilizar los parámetros de region.

A continuación, debes utilizar 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 del script. En dicha secuencia de comandos, que se muestra en el siguiente ejemplo, puedes configurar la ubicación inicial, el tipo de mapa y los controles disponibles para los usuarios en el mapa. Ten en cuenta que getElementById() hace referencia al div de arriba, con el ID "map".

function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 51.485925, lng: -0.129500 },
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.

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

Para personalizar tus marcadores, cambia el color predeterminado (posiblemente a fin de indicar si una ubicación se encuentra abierta) o reemplázalos por imágenes propias, como el logotipo de tu marca. Las ventanas de información o emergentes pueden proporcionar datos adicionales a los usuarios, como el horario de atención, el número de teléfono y hasta fotos. También puedes crear marcadores personalizados con tramas o vectores, arrastrables e incluso animados.

A continuación, se incluye un mapa de ejemplo con marcadores personalizados. Consulta el código fuente en el tema de marcadores personalizados de la API de Maps JavaScript.

Para obtener información detallada, consulta la documentación sobre marcadores de JavaScript (Web), Android o iOS, según corresponda.

Aplica diferentes estilos a tu mapa

Google Maps Platform te permite aplicar diferentes estilos a tu mapa, de modo que puedas afianzar tu marca y ayudar a los usuarios a encontrar la ubicación más cercana y llegar allí 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 estilos de mapa en la página Estilos de mapa de Google Cloud Console, en tu proyecto.

Expande esta sección para ver animaciones que ilustran cómo crear y aplicar estilos de mapa en Cloud Console:

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 estilo Venta minorista reduce la cantidad de lugares de interés en el mapa, lo que permite que los usuarios se enfoquen en tus ubicaciones, así como los puntos de referencia, a fin de ayudarlos a llegar a la ubicación más cercana con la mayor rapidez y certeza posibles.

En la página Estilo del mapa (Map Style), se hace clic en Create New Map Style. En la página Nuevo estilo de mapa (New Map Style), se hace clic en el botón de selección junto a cada uno de los siguientes estilos optimizados según la industria: Viajes (Travel), Logística (Logistics), Agencias inmobiliarias (Real Estate) y Venta minorista (Retail). A medida que se hace clic en cada uno de los botones, cambian la descripción y la vista previa gráfica del estilo de mapa.

Control de 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 estilo de mapa. Cuanto mayor es la densidad, más marcadores de lugares de interés aparecen en el mapa.

En la página Estilo del mapa (Map Style), se hace clic en Create New Map Style. En la página Nuevo estilo de mapa (New Map Style), se hace clic en el botón de selección Mapa de Google (Google Map). Se hace clic en el botón de selección Atlas para mostrar el estilo correspondiente y, luego, en Abrir en el Editor de estilos (Open in Style Editor). En el Editor de estilos, se hace clic en la función Lugares de interés (Points of interest), se selecciona el elemento Ícono (Icon) y se establece el color en rojo. Luego, se selecciona la casilla de verificación Densidad del lugar de interés (POI Density) y se mueve el control deslizante hacia la derecha para establecer la máxima densidad. A medida que se aumenta la densidad, aparecen más marcadores rojos en la vista previa del mapa. Luego, se hace clic en el botón Guardar (Save).

Cada estilo de mapa tiene su propio ID. Tras publicar un estilo en Cloud Console, harás referencia a ese ID de mapa en tu código, lo cual significa que puedes actualizar dicho estilo en tiempo real sin que debas refactorizar tu app. 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 del script, la API de Maps JavaScript pone esos estilos automáticamente a disposición para renderizar más rápido el mapa cuando los llamas en tu código.

<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap">
</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 sobre cómo incorporar los estilos de mapa basados en la nube en JavaScript (Web), Android o iOS, según corresponda.

Combina los datos de ubicación personalizados con la información de Place Details

En la sección anterior Muestra tus ubicaciones en un mapa interactivo, vimos cómo usar Place Details para proporcionar a los usuarios un nivel amplio de información sobre tus ubicaciones, como horarios de atención, fotos y opiniones.

Resulta útil comprender el costo de los diferentes campos de datos de la solicitud de Place Details, los cuales se categorizan como básicos, de contacto y de atmósfera. Para administrar tus costos, una estrategia es combinar la información que ya tienes sobre tus ubicaciones con los datos nuevos (normalmente básicos o de contacto) de Google Maps, como cierres temporales, horarios de días feriados y calificaciones, fotos y opiniones de los usuarios. Si ya tienes la información de contacto de tus tiendas, no necesitarás incluir esos campos en la solicitud de Place Details, sino que podrás limitarla solo a los datos básicos o de atmósfera, según lo 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 fullstack, se proporciona un ejemplo de cómo utilizar GeoJSON con una base de datos para almacenar y recuperar tus propios detalles de ubicación.