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

Para añadir un mapa a tu app, primero decide si necesitas un mapa estático incrustado (una sola ubicación con un marcador, como «encuentra nuestra tienda») o un mapa interactivo (muchos marcadores a partir de tus datos, filtros, agrupación y «cerca de mí»). Para una sola ubicación, un mapa incrustado es lo más rápido y, con la API Maps Embed 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 listados 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 habilitar las APIs que quieras. Su precio de pago por uso incluye, para los SKU de Essentials, como Dynamic Maps, un límite gratuito mensual de 10.000 eventos, y lista 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 aparece 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 web, después 5,00 $ por cada 1.000 cargas. Consulta los precios de Mapbox.

Leaflet y OpenStreetMap

Leaflet se describe 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 de mapa (las imágenes del mapa) de 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 la descarga masiva, no ofrece garantía de servicio y advierte a los servicios comerciales de que el acceso puede retirarse. 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 mapa 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 y tu factura. La guía de seguridad de Google recomienda añadir restricciones de sitio web (referrer HTTP) con tus dominios, y restricciones de API para que la clave solo funcione con las APIs que usas.

Las claves de servicios de servidor, como la geocodificación de miles de direcciones, deben ser claves separadas guardadas en secretos del servidor, no en la página. Además, configura alertas de presupuesto o cuotas en la consola del proveedor para que un error no se convierta en una factura grande.

Geocodificación: convierte las 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 proveedores cobran por petición. El patrón eficiente:

1. Cuando se guarda un listado, 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.

Revisa las condiciones de cada proveedor sobre 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 API Maps Embed con la clave en GOOGLE_MAPS_EMBED_KEY. Añade un enlace «Cómo llegar» debajo. Que ocupe todo el ancho en móviles y que se cargue de forma diferida.

Un mapa interactivo de listados:

Añade latitud y longitud a la tabla de listados. Cuando se cree un listado 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 listado usando Leaflet, con agrupación cuando los marcadores se solapen. Al pulsar 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 listados a menos de 10 km, ordenados por distancia. Si rechaza el acceso a la ubicación, deja que escriba una ciudad.

Paso a paso

1. Elige el tipo de mapa de la tabla de arriba.
2. Crea la cuenta del proveedor y un proyecto, y habilita solo las APIs que necesites.
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 la 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 de una lista. Un mapa solo es difícil de usar en el móvil y para lectores de pantalla. Muestra los mismos resultados en forma de 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 referrer 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 aparece un recuadro gris vacío en producción.
• Diseños solo con mapa. Los marcadores 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

• Tipo de mapa adecuado para el trabajo
• Clave del navegador restringida a tus dominios y APIs necesarias
• Claves de servidor guardadas en secretos
• Coordenadas guardadas en la base de datos, geocodificadas una vez
• Resultados mostrados también 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 móvil

Añadir mapas con Mythex

Mythex no tiene una integración de mapas integrada; usas tu propia clave del 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 Integrate any API. Las coordenadas van en la base de datos del proyecto. Recuerda añadir tanto tu dominio de vista previa como el publicado a las restricciones de sitio web de la clave, y vuelve a publicar después de cambiar los secretos.

Los mapas suelen acompañar a la búsqueda y a los listados: consulta cómo añadir búsqueda a tu app, cómo crear una web de directorio y cómo crear una web para un pequeño negocio.

Preguntas