Como añadir un Google Map totalmente responsive

Paso 1

Ir a la página de Google Maps y seguir las instrucciones para conseguir tu API.

Paso 2

Siguiendo los pasos llegarás a tener un código para un iframe similar al de abajo

<iframe width="600" height="450" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/place?q=place_id:IDdeGoogleQueSea&key=KeyDeGoogleQue Sea"> </iframe>
Paso 3
Añadir un Code Block con un 100% de width o con el ancho en pixels que desees.
Pega el código generado en la página de Google Maps en la sección PHP&HTML pero quitando las referencias a las medidas del ancho, el alto y el estilo de borde, es decir sin los datos de abajo.
width="600" height="450" style="border:0"

Envuelve el código dentro de las etiquetas <div class="iframe-container"> Código Google </div>
De manera que te quedaría algo similar a esto de abajo.

<div class="iframe-container"> <iframe loading="lazy"allowfullscreen src="https://www.google.com/maps/embed/v1/place?q=place_id:IdDeGoogle&key=KeyQueTeDeGoogleEnSuPagina"> </iframe> </div
En Manage > Stylesheets, añadir el siguiente código CSS:
/* Responsive iframes */ :root { --aspect-ratio: 16/9; } .iframe-container { position: relative; width: 100%; margin-bottom: 40px; } .iframe-container::before { content: ""; display: block; padding-bottom: calc(100% / (var(--aspect-ratio))); } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
Un video, en inglés, de Permaslug
databasefile-emptyrocketthumbs-uplayers