Cómo añadir mapas a tu app: incrustados, mapas interactivos y localizadores de tiendas

Para añadir un mapa a tu app, decide primero si necesitas un embebido estático (una sola ubicación con un marcador, como “encuentra nuestra tienda”) o un mapa interactivo (muchos marcadores de tus datos, filtros, agrupación, “cerca de mí”). Para una sola ubicación, un mapa incrustado es lo más rápido y, con la Maps Embed API de Google, gratuito. Para mapas interactivos, usa una librería de mapas en JavaScript (Google Maps JavaScript API, Mapbox GL JS, o la librería de código abierto Leaflet con un proveedor de teselas), guarda la latitud y la longitud de cada lugar en tu base de datos y restringe tu clave de API a tu propio dominio. Los detalles de los proveedores que aparecen abajo proceden de su propia documentación a septiembre de 2026.

¿Qué tipo de mapa necesitas?

La mayoría de las webs de pequeños negocios solo necesitan la primera fila. Los directorios, marketplaces y webs de anuncios necesitan la tercera y la cuarta.

Tus opciones

Google Maps Platform

La guía de inicio de Google indica que debes crear un proyecto de Cloud con facturación activada y activar las APIs que quieras. Su precio de pago por uso incluye los SKU de Essentials, entre ellos Dynamic Maps, con un tope gratuito de 10.000 eventos al mes, y figura Dynamic Maps a 7,00 $ por cada 1.000 eventos por encima de ese límite (en el primer tramo de volumen). El SKU de Maps Embed figura como ilimitado y gratuito. Google también vende planes de suscripción mensuales. Consulta los precios de Google Maps Platform para las cifras actuales.

Mapbox

La página de precios de Mapbox indica 50.000 cargas de mapa mensuales gratuitas para Mapbox GL JS en la web, y después 5,00 $ por cada 1.000 cargas. Consulta los precios de Mapbox.

Leaflet y OpenStreetMap

Leaflet se describe a sí mismo como una librería de JavaScript de código abierto para mapas interactivos adaptados a móviles, de unos 42 KB de JavaScript. Necesita teselas del mapa (las imágenes del mapa) desde algún sitio. Los servidores públicos de teselas de OpenStreetMap resultan tentadores, pero la política de uso de teselas exige atribución visible, prohíbe descargas masivas, no ofrece garantía de servicio y advierte de que los servicios comerciales pueden perder el acceso. Para un producto real, usa una fuente de teselas comercial o autoalojada que funcione con Leaflet.

Claves de API: públicas, pero restringidas

Las claves de mapas usadas en el navegador son visibles para cualquiera que abra tu página. Es lo esperado, pero significa que alguien podría copiar tu clave y disparar el uso en tu factura. La guía de seguridad de Google recomienda añadir restricciones de sitio web (referente HTTP) con tus dominios, y restricciones de API para que la clave solo funcione con las APIs que usas.

Las claves para servicios del lado del servidor —por ejemplo, geocodificar miles de direcciones— deben ser claves separadas guardadas en secretos del servidor, no en la página. Configura también alertas de presupuesto o cuotas en la consola del proveedor para que un error no se convierta en una factura elevada.

Geocodificación: convierte direcciones en coordenadas una vez

Los mapas representan latitud y longitud, no direcciones. Convertir una dirección en coordenadas se llama geocodificación, y la mayoría de los proveedores cobran por petición. El patrón eficiente:

1. Al guardar un anuncio, geocodifica su dirección en el servidor.
2. Guarda la latitud y la longitud en la base de datos.
3. El mapa lee las coordenadas guardadas; nunca geocodifica al ver la página.

Comprueba en las condiciones de cada proveedor cuánto tiempo puedes guardar los resultados de geocodificación; varían.

Prompts de ejemplo

Un mapa incrustado:

En la página de Contacto, añade un mapa de Google incrustado que muestre nuestra dirección (12 High Street, Leeds) usando la Maps Embed API con la clave en GOOGLE_MAPS_EMBED_KEY. Añade un enlace “Cómo llegar” debajo. Que ocupe todo el ancho en teléfonos y que se cargue de forma diferida (lazy).

Un mapa interactivo de anuncios:

Añade latitud y longitud a la tabla de anuncios. Cuando se cree un anuncio o cambie su dirección, geocodifícala en el servidor con la clave en GEOCODING_API_KEY y guarda las coordenadas. En la página Explorar, muestra un mapa con un marcador por anuncio usando Leaflet, con agrupación cuando los marcadores se solapen. Al hacer clic en un marcador se muestran el título, el precio y un enlace. El mapa y la lista deben usar los mismos filtros.

“Cerca de mí”:

Añade un botón “Cerca de mí” que pida la ubicación del visitante y muestre los anuncios a menos de 10 km, ordenados por distancia. Si rechaza el acceso a la ubicación, permite escribir una ciudad.

Paso a paso

1. Elige el tipo de mapa de la tabla del principio.
2. Crea la cuenta del proveedor y un proyecto, y activa solo las APIs que necesitas.
3. Crea las claves: una clave de navegador restringida a tus dominios (incluido el dominio de vista previa mientras construyes) y, si hace falta, una clave de servidor para geocodificación.
4. Guarda las claves como secretos y pide a tu creador que las use; la clave de navegador sigue restringida aunque acabe en la página.
5. Guarda las coordenadas de cada lugar en tu base de datos.
6. Construye el mapa: marcadores, ventanas emergentes, agrupación y un zoom inicial razonable.
7. Acompáñalo con una lista. Un mapa solo es difícil de usar en el teléfono y para lectores de pantalla. Muestra los mismos resultados como lista.
8. Configura una alerta de presupuesto en la consola del proveedor.
9. Publica y prueba en el dominio en vivo, ya que las restricciones por referente a menudo bloquean el mapa hasta que se añade el dominio en vivo.

Errores habituales

• Claves sin restricciones. Cualquiera puede reutilizarlas en su propia web.
• Geocodificar en cada visita a la página. Lento y caro; geocodifica una vez al guardar.
• Olvidar el dominio en vivo en las restricciones de la clave. Funciona en la vista previa y muestra un recuadro gris vacío en producción.
• Diseños solo con mapa. Los pines sin lista son incómodos en pantallas pequeñas e inaccesibles.
• Cientos de marcadores sin agrupación. Ilegibles y lentos.
• Falta de atribución. La mayoría de proveedores de mapas y teselas la exigen, y ocultarla incumple sus condiciones.
• Pedir la ubicación al cargar la página. Pídela solo cuando el usuario pulse “Cerca de mí”.

Lista de comprobación

• Elegido el tipo de mapa adecuado para el trabajo
• Clave de navegador restringida a tus dominios y a las APIs necesarias
• Las claves del servidor guardadas en secretos
• Coordenadas guardadas en la base de datos, geocodificadas una vez
• Los resultados también se muestran como lista
• Agrupación para muchos marcadores
• Atribución visible
• Alerta de presupuesto configurada con el proveedor
• Probado en el dominio publicado y en un teléfono

Añadir mapas con Mythex

Mythex no tiene una integración de mapas incorporada; traes tu propia clave de proveedor, la añades como secreto del proyecto (o la pegas cuando el agente muestre una tarjeta de secretos) y pides el mapa en el chat, como se describe en Integrar cualquier API. Las coordenadas van en la base de datos del proyecto. Recuerda añadir tus dominios de vista previa y publicado a las restricciones de sitio web de la clave, y vuelve a publicar tras cambiar los secretos.

Los mapas suelen ir junto a la búsqueda y los anuncios: consulta cómo añadir búsqueda a tu app, cómo crear un sitio web de directorio y cómo crear la web de un pequeño negocio.

Preguntas