Activa el mapa en la tienda virtual de tus clientes
Con una clave de Google Maps, cuando alguien compra en la tienda virtual de tus clientes, ve un mapa para marcar su dirección de entrega y recibe sugerencias mientras la escribe. La clave se registra una sola vez en tu panel y sirve para las tiendas de todos tus clientes.
1. Consigue la clave de Google Maps
En Google Cloud Console, con tu cuenta de Google:
- Crea un proyecto, o elige uno que ya tengas.
- Activa estas tres APIs:
- Maps JavaScript API: muestra el mapa.
- Geocoding API: convierte el punto del mapa en una dirección escrita.
- Places API (New): sugiere direcciones mientras el cliente escribe.
- En Credenciales, crea una clave de API y cópiala.
Advertencia
Google cobra por el uso de estas APIs cuando pasa el límite gratuito. Restringe la clave a los dominios de tu sistema y a esas tres APIs, para que nadie más pueda usarla con tu cuenta.
2. Pégala en tu panel
Haz clic en Configuración en el menú lateral, luego en Integraciones, y busca la tarjeta Configuración de Google Maps. También puedes escribir maps en el buscador de la configuración.
- Api Key: Pega la clave completa, sin espacios antes ni después.
- Guardar: Guarda la clave. Verás el mensaje Configuración guardada.
- Las APIs necesarias: Las tres APIs que debe tener activas la clave.
Advertencia
El sistema no comprueba la clave al guardarla. Si está mal copiada o le falta alguna de las tres APIs, se guarda igual, pero el mapa o las sugerencias no funcionarán. Revisa el resultado como se indica en el paso 3.
3. Comprueba que funcione
Abre la tienda virtual de uno de tus clientes, agrega un producto al carrito y pulsa Agregar dirección. Debes ver:
- Un mapa con un pin. Si el comprador no tiene una dirección guardada, el mapa intenta ubicarlo con la ubicación de su navegador. Si no da permiso, empieza en Lima.
- Un pin que se puede mover. Al arrastrarlo o hacer clic en otro punto, el campo Dirección se llena solo con la dirección de ese punto. Mientras tanto aparece "Actualizando dirección…".
- Sugerencias al escribir. Desde la tercera letra, el campo Dirección sugiere direcciones de Perú. Al elegir una, el pin se mueve a ese lugar.
Las coordenadas se guardan con la dirección: la próxima vez que el comprador la edite, el mapa se abre en ese punto.
Nota
Si dejas el campo Api Key vacío, la tienda funciona igual, pero sin mapa: el comprador elige Departamento, Provincia y Distrito en listas y escribe su dirección a mano.
Si algo no funciona
El mapa sale en blanco o con un error. Revisa que la clave esté bien copiada y que tenga activas las tres APIs.
El mapa aparece, pero no salen sugerencias al escribir. Falta activar Places API (New).
Al mover el pin, la dirección no se actualiza. Falta activar Geocoding API.
¿Cada cliente necesita su propia clave? No. La clave de tu panel sirve para las tiendas de todos tus clientes.
¿Cómo quito el mapa? Borra el contenido del campo Api Key y pulsa Guardar. La tienda vuelve a pedir departamento, provincia y distrito.
¿La clave se usa en otras pantallas? No. Por ahora solo se usa en la ventana de dirección del carrito de la tienda virtual.