hacer-que-un-mapa-de-googlemaps-sea-responsive

Hacer que un mapa de Googlemaps sea responsive

Seguro que en alguna ocasión has tenido que insertar un mapa de Googlemaps en una página web y te has llevado una sorpresa cuando las has visualizado desde el móvil. Y es que a pesar de que tu página web sea responsive, si insertas un mapa de google en tu página web, este mapa no se va a adaptar nunca.

Otra cuestión es que si tu página web está basada en Wordpress, hayas usado algún plugin, pero creo que si te puedes ahorrar el instalar un plugin en tu WordPress mucho mejor, así que como existe una solución muy sencilla para hacer que un mapa de Googlemaps sea responsive, os la voy a a explicar a continuación.

Supongo que ya sabes que si quieres llevar a tu web un mapa de Googlemaps, a través de esta aplicación web tienes la opción de insertar. Antes la encontrábamos con un acceso directo y ahora tenemos que desplegar el menú y lo encontraremos en la parte media de las opciones (“compartir o insertar el mapa“). Una vez le damos nos aparece una ventana flotante como la de la imagen y si le damos a la segunda pestaña, se nos ofrecerá la opción de copiar un código para insertar el mapa en nuestra web.

insertarmapadegooglemaps

Ahora bien, si queremos hacer que un mapa de Googlemaps sea responsive hay que hacer lo siguiente. Lo primero darse cuenta que cuando copias dicho código este índica unas dimensiones predeterminadas que por defecto son 600 píxeles de ancho por 450 píxeles de alto. Lo segundo insertar un código CSS para digamos enmarcar el código IFRAME que insertamos y de esta manera jugar con el tamaño.

Lo primero es que el código que nos hemos traído lo metamos en una clase que puede llamarse “google-maps“. Habiendo metido nuestro código en dicha clase ahora lo único que tendremos que hacer es copiar el código que os dejo a continuación en vuestra hoja de estilos CSS.

<style>
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
 
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12698.017302765014!2d-5.924386855443038!3d37.28317952472348!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd12705c945f7355%3A0x1f6735c306757c59!2sDos+Hermanas%2C+Sevilla%2C+Espa%C3%B1a!5e0!3m2!1ses!2s!4v1387797719272" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Como podéis ver es bastante sencillo hacer que un mapa de Googlemaps sea responsive, así que os recomiendo que uséis este pequeño truco y os olvidéis de usar plugins.

Etiquetado como: