Insertar mapas de Google de manera responsive

Cuando coges el código de Google Maps, para insertar un mapa en tu web, ese código no es responsive. Tiene un tamaño fijo. Normalmente unos 450px de alto por 600px de ancho.
Hoy os enseñamos un truco para insertarlos de manera responsive.

Hay que poner este código (o similar):

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%;
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

Con esto podemos coger el código de Google Maps que es algo como:

<div class="google-maps">
    <iframe src="......código de Google va aquí"></iframe>
</div>

Como veis lo que estamos haciendo es cambiar el css de la clase que nos da Google. 

Fuente.

6 comentarios en «Insertar mapas de Google de manera responsive»