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.

 

Os recomendamos los siguientes productos relacionados con la informática:

 

SAMSUNG SSD Memoria Interno 990 Pro 2TB NVME

(9364)

157,07 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

Kingston DataTraveler Exodia DTX/128GB Flash Drive USB 3.2 Gen 1 - with Protective Cap and Keyring in Multiple Colours

(48803)

6,95 € (as of 20 noviembre, 2024 08:43 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

SanDisk 128GB Ultra Luxe Memoria flash, USB 3.2, con velocidades de transferencia hasta 400MB/s

(20795)

9,99 € (as of 20 noviembre, 2024 08:43 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

Samsung Galaxy Tab A9+ 128 GB 27.9 Cm (11") 8 GB Wi-Fi 5 (802.11Ac), W128826931 ((11) 8 GB Wi-Fi 5 (802.11Ac) Graphite)

(1215)

189,49 € (as of 20 noviembre, 2024 08:43 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

Logitech M185 Ratón Inalámbrico, 2.4GHz con Mini Receptor USB, Batería de 12 Meses, Seguimiento Óptico con Resolución de 1000 dpi, Ambidiestro, Compatible con PC, Mac, Portátil - Azul

(107841)

9,49 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

Aimoh Auriculares In Ear con Cable y Microfono, HiFi Estéreo Cancelación Ruido Auriculares, Auriculares con Cable compatibles con una Variedad de Dispositivos de 3,5 mm

(8654)

5,99 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

MSI Pro MP161 E2 Monitor portátil Full HD de 15,6", Panel IPS 1920 x 1080, 60 Hz, Pantalla Agradable a la Vista (PC, portátil, móvil), Altavoces, chasis y Soporte, Mini-HDMI 2.0b, 2 x USB Type-C

(11)

(as of 21 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

Capturadora Video capturadora hdmi,USB a hdmi Vídeo Game Capture 1080P Transmisión en Vivo de Transmisión de Vídeo para Juegos, Transmisión, Enseñanza, Videoconferencia

(2045)

7,98 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

Kodak Mini 2 Retro Navidad Regalos 4Pass, Impresora Fotográfica + 68 Fotos, Fotos Instantáneas Tamaño 54X86mm, Conexión Inalámbrica Bluetooth - Blanco

(6641)

97,99 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)

HP 305 6ZD17AE, Negro y Tricolor, Cartuchos de Tinta Originales, Pack de 2, compatible con impresoras de inyección de tinta HP Deskjet, HP Deskjet Plus y HP Envy

(49084)

22,99 € (as of 20 noviembre, 2024 04:06 GMT +01:00 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)