Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
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

Click para Copiar
Copiado
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"
Click para Copiar
Copiado

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.

Click para Copiar
Copiado
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;
}
Click para Copiar
Copiado
Un video, en inglés, de Permaslug