El nuevo Mapas de Google ofrece la opción de insertar mapas en el sitio de nuestra web que estimemos oportuno.
Si estamos en la web de mapas de Google, solo es necesario hacer zoom en el area del sitio que queremos incluir, más tarde entramos en el icono del engranaje situado en la esquina debajo de la parte izquierda y elegimos la opción de insertar mapas desde el menú.
Si necesitas plugins de WordPress para añadir más opciones a los mapas de tu sitio sigue este enlace.
Este sitio ofrece un código de inserción por defecto creado por mapas de Google, para posteriormente incluir en la web y poder mostrar el mapa.
El problema es que este mapa por defecto no es responsive y en estos momentos es cada vez más importante este tema para la usabilidad de los usuarios que visitan nuestra página desde distintos dispositivos.
El mapa de Google no encaja en la pantalla y tendremos que hacer un desplazamiento por la página de forma horizontal para poder el mapa completo.
En la imagen podemos ver otra página web que contiene el mismo mapa de Google. Ahora el mapa si tiene un estilo responsive o adaptativo para cualquier dispositivo, el cual se ajusta el tamaño de forma automática en función del tamaño de la pantalla.
Cómo insertar el nuevo mapas de Google de forma responsive.
Este es el código de inserción por defecto para cualquier mapa de Google:
<iframe
src="https://www.google.com/maps/embed"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
></iframe>
Como se especifica en los parámetros de altura y anchura del código de inserción, la altura por defecto para el medio insertado es 450px o el 75% de la anchura por defecto (600px).
Si desea transformar este tamaño estático de mapas de Google en sensible para cada pantalla, todo lo que tenemos que hacer es añadir un par de reglas CSS a tu página web y envolver el código IFRAME dentro de estas reglas.
El nuevo código de inserción con el estilo de respuesta va a ser como vemos a continuación. Puedes cambiar el valor de padding-bottom (línea # 4) de 75% a algo pora una relación de aspecto diferente.
<style>
.google-maps {
position: relative;
padding-bottom: 75%; // Esta es la relación de aspecto
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
<div class="google-maps">
<iframe
src="https://www.google.com/maps/embed"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
></iframe>
</div>Lazy Load en Google Maps
Lazy Loading es una técnica que permite cargar Google Maps solo cuando el usuario se desplaza a la posición en la página donde está incrustado ese mapa. Esto ayuda a mejorar el rendimiento de tu sitio web y el “web vitals score” de tu sitio, ya que el pesado código JavaScript que carga Google Maps no se carga hasta que el usuario se desplaza al mapa.
Anteriormente, los sitios web tenían que usar la API de “Intersection Observer” para cargar mapas e imágenes gradualmente a medida que se hacían visibles en la pantalla. Este ya no es el caso, ya que la mayoría de los navegadores modernos ahora admiten el atributo de carga en los elementos:
img e <iframe>Simplemente añade loading=’lazy’ al elemento IFRAME y el navegador aplazará la carga de Google Maps cuando están fuera de la pantalla hasta que el usuario se desplace cerca del mapa. Se puede usar una técnica similar para incrustar videos y fotos de Instagram de forma responsive.
Fuente: Reinspirit.com