Como insertar y mostrar mapas de OpenStreetMap en páginas web

En este artículo comparto con ejemplos prácticos, como podemos insertar mapas del servicio de OpenStreetMap, en las páginas de un blog o sitio web, para complementar su contenido.
En otro artículo de este sitio, se detallan varias opciones para insertar mapas de Google Maps.

¿Qué es OpenStreetMap?

OpenStreetMap también conocido por sus siglas OSM, es uno de los más populares servicios de mapas online de internet y un proyecto encaminado a la creación, publicación y visualización de mapas para su uso en diferentes plataformas y dispositivos.
Accediendo al sitio, podrás cargar mapas de cualquiera región o zona geográfica.
Es un proyecto de colaboración de código abierto y libre, en el que puede participar y aportar cualquier persona.
La principal característica y lo que distingue a OSM, es que los mapas son creados y editados por los propios miembros, aportando cada uno su conocimiento.
Cualquier persona puede colaborar, siempre que cuente con una conexión a Internet con la que poder subir los mapas editados.
De hecho en la medida que mas personas aporten, mas se enriquecerá el contenido de dichos mapas.
Lee en otro artículo de nuestro sitio una guía elemental para aprender a agregar al mapa los sitios y lugares que conoces: Como editar los mapas de OpenStreetMap y agregar datos e información

¿Cómo mostrar mapas de OSM en las páginas de un sitio web?

Existen dos formas de mostrar e insertar los mapas de OSM en las páginas web.
La primera y más sencilla, al alcance de cualquier aficionado, es mediante un iframe o marco.
El código de este elemento puede obtenerse en la página web del servicio.
Las limitaciones de este método son dos: más lentitud en la car4ga de los mapas y la imposibilidad de agregarle elementos como marcadores, globos de información, imágenes, etc.
La segunda opción para insertar los mapas es usar una librería de JavaScript de servicios auxiliares.
Los dos principales y más populares, ambos libres, son OpenLayers y Leaflet.

Insertar un mapa de OpenStreetMap en un marco o iframe

Para mostrar un mapa en un marco o iframe, sigue los siguientes pasos:
Es todo, el código necesita unos ajustes para que valide correctamente y para que el mapa sea adaptable a dispositivos móviles.
A continuación un mapa insertado en esta página, usando este sistema.
Ver mapa más grande
Código del iframe usado y modificado y de la regla de estilo CSS para hacerlo adaptable.

HTML
<div class="mapa">
<iframe class="iframe" height="500" src="https://www.openstreetmap.org/export/embed.html?bbox=-82.55264282226564%2C22.971353928229505%2C-82.19009399414064%2C23.200960808078566&layer=mapnik"></iframe>
</div>

CSS
.mapa iframe{width:100%;}
.iframe{border:0;}

Como se puede comprobar es necesario eliminar la propiedad "width", para que el mapa sea ajustable.
El ancho sse define en el CSS.
Tambien necesitamos eliminar las propiedades: "frameborder", "scrolling", "marginheight" y "marginwidth", para que la página valide.

Servicios y otros métodos para insertar mapas de OpenStreetMap

El proyecto de OpenStreetMap no puede ofrecer una API para facilitar que los mapas sean mostrados en las páginas de sitios web.
Esto es asumido por varios servicios, la gran mayoría libres y algunos de pago con más recursos.
En este artículo detallamos como usar los principales de estos servicios, para mostrar cualquier mapa en las páginas de un blog o sitio web, de forma sencilla.
Por supuesto obviamos los servicios de pago.
No es necesario saber de JavaScript, solo copiar y pegar y tener las nociones elementales de lo que es latitud, longitud y el nivel de zoom.
Los principales son los siguientes:
Existen otros servicios, pero solo relacionamos los mas empleados en internet y factibles para los lectores.
Todos los mapas generados usando los servicios anteriores, son adaptables y se adaptan al tamaño de la pantalla de cualquier dispositivo.

Mostrar mapas de OpenStreetMap con OpenLayers

OpenLayers es una librería JavaScript gratis y de código abierto, para posibilitar integrar los mapas de OpenStreetMaps en los sitios web.
La librería es muy fácil de usar, con varias opciones.
Desde el sitio del proyecto se cargan los archivos necesarios, aunque los que poseen un servidor pueden alojarlos para mejorar el rendimiento.
Es la librería que recomiendo a los aficionados por su facilidad de uso y por la gran cantidad de ejemplos prácticos en su documentación.
Lee más información detallada: Crear mapas de OpenStreetMap con OpenLayers

Mostrar mapas de OpenStreetMap con Leaflet

Leaflet proporciona una librería en JavaScript, libre y de código abierto con muchos recursos.
Posibilita insertar mapas de OSM y de otros servicios de mapas de internet, en las páginas de un blog o sitio web.
A continuación se puede ver un mapa de OpenStreetMap insertado en esta página, usando la Librería de Leaflet.
El CDN de Leaflet sirve los archivos de estilo y JavaScript, aunque lo ideal es alojarlos en nuestro servicio de hosting.
Leaflet es usado por muchos sitios importantes de internet.
Lee más información detallada de como agregar mapas usando esta libreria: Crear mapas de OpenStreetMap con Leaflet

---

Mostrar mapas de OpenStreetMap con Google Maps

Uno de los métodos más sencillos de insertar y generar en una página web un mapa de OpenStretMap, es usando la API de Google Map y agregando como un layer (capa) las miniaturas (tiles) de OSM.
Usando la API 3 del servicio de Google, no es necesario ninguna clave, solo insertar el código necesario en JavaScript.
Este es un método empleado en muchos sitios web, porque el mapa carga bastante rápido.

Un mapa completamente funcional que usa este método se puede probar en la siguiente página de este sitio: Mapa mixto de Google Maps y OpenStreetMaps

Páginas relacionadas