Insertar localizaciones en HTML con OpenStreetMap

Vamos insertar el típico mapa de geolocalización en una página web, con los mapas de OpenStreetMap. Estoy tendiendo últimamente a usar esta plataforma para la inserción de mapas en las página web, tanto cuando trabajo con WordPress como cuando hago proyectos sin CMS. OpenStreetMap (también conocido como OSM) es un proyecto colaborativo para crear mapas editables y libres, con una licencia ODbl(copyleft) y eso para mi es una diferencia respecto a Goole Maps que marca la diferencia.

Para insertar una localización con OpenStreetMap, vamos a la página web https://www.openstreetmap.org/ y en el buscador ponemos la dirección.

Una vez puesta la dirección, nos aparecerá una serie de opciones en la parte derecha de la pantalla, seleccionamos la de compartir y chequeamos la opción de “Incluir marcador”, la pestaña de HTML  y copiamos el código a nuestro proyecto. Con las opciones de + y – , dejamos el zoom del mapa a nuestro gusto.

El código HTML que nos proporciona es este:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://www.openstreetmap.org/export/embed.html?bbox=-2.6706272363662724%2C42.845961772892764%2C-2.6656115055084233%2C42.84890760102263&amp;
layer=mapnik&amp;marker=42.84743470451829%2C-2.6681193709373474" 
style="border: 1px solid black"></iframe><br/><small>
<a href="https://www.openstreetmap.org/?mlat=42.84743&amp;mlon=-2.66812#map=18/42.84743/-2.66812&amp;
layers=N">Ver mapa más grande</a></small>

Vamos a analizar un poco este código:

• En la etiqueta <iframe> encontramos los atributos width y height que hacen que el mapa tenga un tamaño fijo. Si queremos que tenga una anchura completa de la página y sea responsive, borramos el atributo width y hacemos un selector en CSS, para la etiqueta <iframe> y le damos un width:100%;
• También podemos ver que en el atributo “style”, le mete un borde negro de 1px, que para tener el mapa a ancho completo tenemos que quitarlo también.
• Por último hay un enlace para ver el mapa más grande, que podemos quitar también sino queremos que aparezca.

El código quedaría así:

<iframe height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://www.openstreetmap.org/export/embed.html?bbox=-8.837428092956545%2C42.49725727803416%2C-8.797302246093752%2C42.520952568910346&amp;
layer=mapnik&amp;marker=42.50910604627249%2C-8.817365169525146" ></iframe>