Cómo añadir un mapa de OpenStreetMap (Leaflet) a un sitio web de Turbosite

OpenStreetMap (OSM) es una base de datos cartográfica gratuita, una alternativa abierta a Google Maps y Yandex Maps. Leaflet es la biblioteca de JavaScript más popular para mostrar OSM en un sitio web. Es totalmente gratuita, sin claves API y sin límites. Ideal para proyectos donde es importante evitar servicios de pago. La instalación toma de 5 a 10 minutos.

Qué necesitará

Las coordenadas del lugar que desea mostrar (latitud/longitud) — puede obtenerlas en openstreetmap.org (clic derecho en el punto → «Show address»)
Un sitio web publicado en Turbosite
5–10 minutos

Paso 1. Obtener las coordenadas de su ubicación

Abra openstreetmap.org.
Busque la dirección u organización deseada.
Haga clic derecho en el punto necesario → «Show address».
En la barra de direcciones aparecerán coordenadas como 52.5200,13.4050 (latitud, longitud). Anótelas.

Paso 2. Preparar el código HTML

A diferencia de Google Maps y 2GIS, OSM no tiene un constructor de iframe listo para usar; el mapa se conecta a través de la biblioteca Leaflet. Aquí tiene el código listo para usar:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
  var map = L.map('map').setView([52.5200, 13.4050], 15);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.marker([52.5200, 13.4050]).addTo(map)
    .bindPopup('Aquí estamos ubicados')
    .openPopup();
</script>

Qué debe personalizar:

52.5200, 13.4050 — reemplace ambos valores con sus coordenadas (latitud, longitud).
15 — nivel de zoom del mapa (13–17 para una ciudad; cuanto mayor sea el número, más cerca).
Aquí estamos ubicados — el texto en la ventana emergente (popup) sobre el marcador.
height: 400px — la altura del mapa.

Paso 3. Insertar el código en Turbosite

El mapa aparecerá en un lugar específico de la página.

Abra su sitio web en Turbosite.
Añada un bloque de «Código HTML» en el lugar deseado de la página (normalmente en el bloque de «Contactos»).
Pegue el código de Leaflet preparado.
Guarde los cambios.
Publique el sitio web.

📷 [captura de pantalla de Turbosite — se añadirá: bloque de código HTML en el cuerpo de la página con el código de Leaflet].

Paso 4. Verificar que el mapa funcione

Abra el sitio web publicado.
Desplácese hasta el bloque del mapa; debería cargarse el mapa de OpenStreetMap con un marcador.
Haga clic en el marcador; aparecerá una ventana emergente con su texto.
Compruebe el zoom (rueda del ratón o pellizco en dispositivos móviles).

Preguntas frecuentes

¿Por qué usar OSM en lugar de Google Maps? Las razones principales: es totalmente gratuito sin límites ni claves API, no requiere registro y no hay riesgo de interrupción del servicio. La desventaja es que los datos pueden ser menos precisos en regiones pequeñas.

¿Se pueden añadir varios marcadores? Sí, repita L.marker([latitud, longitud]).addTo(map).bindPopup('Texto'); para cada marcador.

El mapa ralentiza el sitio web. Leaflet y los mosaicos (tiles) de OSM se cargan bajo demanda. Si solo hay un mapa en la página, no debería haber problemas.

¿Se puede estilizar el mapa con colores corporativos? Sí, pero no a través de los mosaicos estándar de OSM. Utilice proveedores de mosaicos de terceros (Mapbox, Stadia Maps, Thunderforest); algunos son gratuitos para cargas pequeñas, otros son de pago.

¿Es necesario incluir la atribución de OpenStreetMap? Sí, es obligatorio; es un requisito de la licencia. En el código proporcionado arriba, ya está incluida en la línea attribution.

Qué consultar a continuación

Documentación de Leaflet — guía de referencia completa
Guía de inicio rápido de Leaflet — introducción rápida
OpenStreetMap — el mapa en sí
Proveedores de mosaicos alternativos — para cambiar el estilo del mapa