Saltar al contenido

Crear un sitio web interactivo: guía práctica para integrar un mapa personalizado

Integrar un mapa interactivo en un sitio web no se limita a pegar un trozo de código HTML en una página. La elección…

Développeuse web intégrant une carte interactive sur son écran d'ordinateur dans un bureau moderne

Integrar un mapa interactivo en un sitio web no se limita a pegar un fragmento de código HTML en una página. La elección del proveedor de mapas, el método de integración y las obligaciones legales relacionadas con los rastreadores de terceros condicionan tanto el rendimiento técnico como la experiencia del usuario. Esta guía desglosa los puntos de fricción concretos que plantea la adición de un mapa personalizado, desde el consentimiento RGPD hasta los costos ocultos de las API.

Rastreadores de terceros y consentimiento RGPD: el requisito que impone el mapa

Antes de hablar de iframe o script, hay un punto legal que debe resolverse. Tan pronto como un mapa de terceros se carga en su página, puede depositar cookies o rastreadores en el navegador del visitante.

La normativa exige que estos rastreadores sean identificados según su origen y finalidad. Cuando requieren consentimiento, este debe ser recogido antes del depósito o la lectura del rastreador. El rechazo debe ser tan simple como la aceptación, y la elección debe poder ser modificada posteriormente.

En la práctica, esto significa que un mapa de Google Maps o Mapbox integrado directamente en el HTML se carga con la página, antes de cualquier interacción. Si su banner de consentimiento aún no ha recibido respuesta, usted está potencialmente en infracción. Existen dos soluciones técnicas para gestionar este caso de manera adecuada, y cada una tiene un costo en experiencia del usuario.

  • Carga diferida (lazy consent): el mapa solo se carga después de la aceptación explícita de las cookies. Mientras tanto, el visitante ve un marcador estático (una imagen del mapa o un mensaje informativo). Legalmente fiable, pero el visitante que rechaza las cookies nunca verá el mapa.
  • El mapa autoalojado con mosaicos de OpenStreetMap o MapLibre: no se deposita ningún rastreador de terceros ya que los datos cartográficos se sirven desde su propia infraestructura o desde servidores que no depositan cookies. Más complejo de implementar, pero el consentimiento ya no es un obstáculo para la visualización.
  • La imagen de respaldo: una captura de pantalla clicable que redirige al mapa en pantalla completa después del consentimiento. Enfoque minimalista, adaptado a sitios de vitrina con un solo punto de localización.

Probar su sitio sin consentimiento previo, en navegación privada, permite verificar qué rastreadores son efectivamente depositados por el mapa. Es una auditoría rápida que muchos desarrolladores pasan por alto.

Para profundizar en la cartografía web en Portail Web, los pasos de integración están detallados con ejemplos concretos según las plataformas.

Diseñador web planificando la integración de un mapa personalizado en un sitio con maquetas impresas

Costo real de las API cartográficas: Google Maps, Mapbox y alternativas gratuitas

La gratuidad anunciada por los principales proveedores de mapas oculta una estructura tarifaria que depende de las funcionalidades realmente utilizadas. Una simple visualización de mapa, una búsqueda de dirección y un cálculo de ruta no se facturan al mismo precio.

Google Maps Platform

Google otorga 10,000 cargas gratuitas por mes para la visualización de mapas. Más allá de eso, la facturación pasa a 7 dólares por 1,000 cargas adicionales. La geocodificación, las rutas y las vistas de Street View pertenecen a tarifas distintas. Un sitio con alto tráfico que utiliza varios de estos servicios puede ver su factura aumentar sin que el número de mapas mostrados haya cambiado.

Mapbox

Mapbox ofrece un umbral gratuito más generoso: 50,000 cargas gratuitas por mes, luego 5 dólares por 1,000 cargas. El estilo visual de los mapas de Mapbox ofrece más libertad en personalización que Google Maps, lo que explica su adopción por proyectos editoriales y oficinas de turismo.

OpenStreetMap y MapLibre

OpenStreetMap proporciona los datos cartográficos bajo licencia libre. MapLibre GL JS, la biblioteca de renderizado del lado del cliente, permite mostrar estos datos sin depender de un servicio de pago. La contraparte: el alojamiento de los mosaicos vectoriales y la configuración del renderizado quedan a su cargo. La documentación de MapLibre GL JS v6 señala restricciones de integración relacionadas con los módulos y la carga del trabajador, lo que requiere una competencia de front-end que todos los proyectos no tienen internamente.

La elección del proveedor no puede hacerse únicamente en función del precio de la visualización. El costo total depende del volumen de tráfico, de las funcionalidades activadas (geocodificación, rutas, lugares) y de la capacidad técnica del equipo para mantener una solución autoalojada.

Iframe contra script: lo que cada método implica para el SEO

La mayoría de los tutoriales proponen el iframe como método de integración por defecto. Copiar y pegar un enlace de integración de Google Maps en una etiqueta iframe toma treinta segundos. El resultado se muestra correctamente en la página.

El problema se encuentra en el lado del SEO. Google no garantiza que el contenido de un iframe esté vinculado a la página que lo alberga. Las fichas de lugares, los nombres de rutas, las descripciones integradas en el mapa permanecen en un documento separado, invisible para el rastreador en el contexto de su página. Un mapa rico en datos útiles para el SEO local pierde todo su valor SEO si se sirve en iframe.

La integración por script (JavaScript) carga el mapa directamente en el DOM de la página. Los datos asociados (marcadores, popups, fichas) forman parte del documento HTML. Este método requiere más trabajo, pero permite estructurar la información cartográfica de manera que sea aprovechable por los motores de búsqueda.

Dos desarrolladores colaborando en la integración de un mapa personalizado en un sitio web interactivo

Para un sitio de vitrina con una sola dirección, el iframe sigue siendo aceptable. Para un sitio que muestra una red de puntos, rutas o fichas detalladas, la integración por script protege el SEO del contenido cartográfico.

Medir el compromiso real en un mapa interactivo

Mostrar un mapa no es suficiente. Saber si los visitantes realmente lo utilizan permite justificar la inversión técnica y el costo potencial de la API. Datos de producción provenientes de mapas territoriales muestran resultados reveladores: 5 minutos 56 segundos de duración media por sesión en un mapa interactivo de territorio, y 41.4 % de las sesiones abren al menos una ficha de ruta o lugar.

Estas métricas no son transferibles a todos los sitios. Un comercio electrónico con un localizador de tiendas no obtendrá las mismas duraciones de sesión que una oficina de turismo. La herramienta de medición (Google Analytics, Matomo, eventos JavaScript personalizados) debe configurarse para captar las interacciones específicas del mapa: clics en los marcadores, apertura de fichas, cambio de filtros, paso a pantalla completa.

Sin este seguimiento, el mapa sigue siendo un elemento decorativo cuya utilidad nadie puede evaluar. Con él, se convierte en un componente medible del recorrido del usuario, capaz de justificar su mantenimiento o su reemplazo por una solución más ligera.

Crear un sitio web interactivo: guía práctica para integrar un mapa personalizado