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»

Deja un comentario

Resumen de nuestra Política de Privacidad

  • Responsable: SmythSys IT Consulting SLNE.
  • Finalidad: Gestionar y moderar los comentarios.
  • Legitimación: Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios: Tus datos se alojan en los servidores de OVH.
  • Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la dirección del responsable (en nuestra política de privacidad).

Time limit is exhausted. Please reload CAPTCHA.