Oxygenados La comunidad hispana
post oxygen builder
Logo Oxygenados

Como añadir un Google Map

¿Cómo puedes hacerlo?

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
0 0 votos
Article Rating
Suscribir
Notificar de
guest
0 Comments
Comentarios en línea
Ver todos los comentarios

OTROS TIPS

Burbuja que sigue al cursor

Un efecto de seguimiento del cursor con solo código.

Leer más
Botón para copiar

Con un poco de código podemos hacer el típico botón que nos permite pasar al porta-papeles o lo que es lo mismo, copiar un texto; este texto puede estar oculto o visible y podrá ser código o texto plano.

Leer más
Año Copyright dinámico

Hacer que el año del copyright, generalmente colocado en el footer, se actualize de manera automática. Mostramos tres maneras de hacerlo.

Leer más
LISTADO TIPS