El añadir lightbox con sus efectos visuales parece una tarea difícil y que requiere el uso de un nuevo plugin, pero nada más lejos de la realidad, con Oxygen lo tenemos muy fácil, realmente asombrosamente fácil con dos líneas de código HTML y pocas más de código JavaScript, aquí mostramos como 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.
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
Hola,
Muy interesante esto y toda la web. Me ha ayudado mucho con esta web . Creo que se debería explicar más las locuras que se pueden hacer para el seo con oxygen....
Pero este artículo no lo puedo ver bien porque se ven bloques negros donde se debería ver código.
Un saludo y muchas gracias.
Gracias por tu comentario.
No sabemos el por qué del que no puedes ver el código. ¿Podrías decirnos que navegador usas?
Y por cierto, tenemos un listado de webs en español, si quieres añadir tu o tus webs a este listado escríbenos por medio del enlace que hay disponible en la misma página que es esta
Y así mismo, estamos en este grupo de Telegram
Hola otra vez,
Pues utilizo chrome en escritorio. Y veo franjas negras. Intento pasar un enlace aquí con una captura de pantalla.
Gracias por invitarme al telegram pero todavía no tengo.
Alguna incompatibilidad con tu navegador, no sé si lo tienes actualizado. Nosotros lo tenemos probado con varios, Opera, Safari, Firefox, Edge... y en todos se ve perfectamente, y tampoco nadie ha dicho nada hasta el momento.
Un saludo
Utilize el video para crear el api key y lo inserté en los settings de oxygen pero en el sitio web, usando el elemento de google maps de oxygen insertado no me muestra más que el mapamundi completo repetido 7 veces. No me muestra la dirección escrita en el parámetro del elemento.
En la actualidad la API de google maps es de pago por lo que el problema puede ser ese.
Tienes más info en los enlaces de abajo.
https://norfipc.com/web/como-insertar-mostrar-mapas-google-paginas-web.php
https://developers.google.com/codelabs/maps-platform/maps-platform-101-js