ReInSpirit

  • Contacto
  • Blog
  • Servicios
    • Alojamiento Web
    • Desarrollo y diseño web
  • Descuento E T
  • Sobre Nosotros

Como hacer que los mapas de Google tengan un diseño responsive

1 febrero, 2022 por Pedro Mendez 57 comentarios

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.

mapa google responsive

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.

..Entradas Relacionadas

  • 3 razones por las que el diseño web responsive es la mejor opción para una estrategia SEO móvil
  • Como crear dos columnas responsive en Contact Form 7
  • 30 Themes Wordpress Responsive Gratis listos para Descargar
  • Los mejores plugins responsive gratuitos para Sliders en Wordpress
  • Genesis Framework: mi opinión y revisión sobre el marco de WordPress

Publicado en: Diseño Etiquetado como: responsive

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Comentarios

  1. Dovi dice

    5 marzo, 2014 a las 9:28 AM

    Muy buen articulo, justo lo que andaba buscando! Pero al insertar el código a un widget, me desaparece todo. Hago pruebas con tu propio código… Debe ser que algo no funciona correctamente. Alguna solución?
    Gracias

    Responder
    • Pedro Mendez dice

      5 marzo, 2014 a las 4:31 PM

      Hola Dovi, lo acabo de probar y funciona perfectamente. Copia el código en texto plano, dentro de la caja del código pone «view plain text», pulsa ahí y copialo y pegalo a ver que tal funciona. Ya me cuentas como va. Saludos

      Responder
  2. Fuji dice

    6 marzo, 2014 a las 12:45 AM

    Muy buenas…
    Llevaba toda la tarde fustrado, por que no conseguia configurar correctamente el w3cache total y un cnd de amazon, y mientras me tomaba una caña y repasabva la web, me dado cuenta que el mapa de google no se encojia en el movil, ayer cambie el plugin por el mapa y me parecio todo perfecto facil y rapido…..
    pero al ver el fallo hoy se me ha venido el mundo abajo.(soy un novato, y a estas horas me puesto a buscar la solucion y por muchisima suerte he dado con su pagina, he leido un poco y he probado y…….. perfectooooo…… he flipaoooo…
    asi que muchas gracias y me guardo su web en mis favoritos, por si encuentro alguna perla mas.
    🙂

    Responder
    • Pedro Mendez dice

      6 marzo, 2014 a las 10:46 AM

      Gracias Fuji! Es curioso que Google que tanto recomienda una experiencia de usuario excelente, no disponga en sus recursos de algo tan simple como un diseño responsive o adaptativo. Abrazos

      Responder
  3. Rubén dice

    25 marzo, 2014 a las 1:30 PM

    😉 Me ha venido esquiso, muchas gracias.

    Responder
  4. Sergio dice

    14 abril, 2014 a las 7:56 PM

    Gracias!!, me ha servido de gran ayuda!!

    Responder
  5. Javier dice

    11 julio, 2014 a las 2:03 AM

    Sencillamente, brillante.
    Grandísima tu aportación para los que valoramos, ante todo, una buena experiencia y de calidad al navegar por las numerosas páginas webs.
    Un abrazo.

    Responder
    • Pedro Mendez dice

      11 julio, 2014 a las 9:48 AM

      Gracias a ti por tu comentario Javier. Abrazos

      Responder
  6. Gastón dice

    17 julio, 2014 a las 11:06 PM

    ¡Muy buen artículo!, me sirvió perfectamente para mi proyecto.
    Llegué aquí por casualidad, traído por Google, al buscar «como hacer responsive un mapa de Google»
    ¡Tu blog está repleto de utilidades, te felicito, y muchas gracias por compartir toda esta información tan útil!
    Abrazo desde la Patagonia, en Argentina.

    Responder
    • Pedro Mendez dice

      19 julio, 2014 a las 1:15 PM

      Gracias Gastón. Saludos desde Andalucia

      Responder
  7. Alberto dice

    31 agosto, 2014 a las 11:08 PM

    Muchas gracias, me funciona perfecto.

    Responder
  8. Aaron dice

    24 septiembre, 2014 a las 4:49 AM

    Excelente!! justo lo que buscaba, muchas gracias.

    Responder
  9. Zona Ocho dice

    15 noviembre, 2014 a las 3:26 PM

    Muchas gracias!!!!

    Responder
  10. Zona Ocho dice

    17 noviembre, 2014 a las 11:40 AM

    Me ha servido y está genial, pero me surge una pequeña duda: ¿Cómo hago para que en el navegador del móvil siga viéndose a un tamaño razonable?

    Aquí hay un ejemplo: http://www.liveaudiovisual.es/
    Y aquí como se ve en mi web: http://www.zonaocho.com/

    Hay que verlo en el móvil para que lo entiendas 😉

    Responder
    • Pedro Mendez dice

      18 noviembre, 2014 a las 11:57 AM

      Hola, tienes que cambiar el ancho del mapa con esto padding-bottom: 75% . Cambia a un porcentaje mas algo por ejemplo 95% y ve realizando pruebas hasta dejarlo como te guste

      Responder
      • Zona Ocho dice

        18 noviembre, 2014 a las 12:50 PM

        Muchas gracias Pedro

        No quiero darte la brasa ya que entiendo que este no es el lugar 😉

        Ya cambié ese valor y funciona tal y como dices, pero si lo pongo muy alto para que se vea bien en el smartphone se ve enorme en el navegador del ordenador y si lo hago más pequeño pues se ve bien en el navegador, pero en el móvil no se llega a ver decentemente.

        Muchas gracias por tu tiempo.

        Responder
        • Pedro Mendez dice

          20 noviembre, 2014 a las 10:58 AM

          Vaya, pues voy a investigar un poco y te cuento…

          Responder
        • Pedro Mendez dice

          24 noviembre, 2014 a las 11:19 AM

          También puedes tirar de un plugin responsive para incluir los mapas como este https://wordpress.org/plugins/responsive-google-map/

          Responder
          • Zona Ocho dice

            5 diciembre, 2014 a las 2:45 PM

            Muchísimas gracias Pedro!

            De momento tiraré con el plugin…aunque tengo bastantes y me gustaría prescindir de él.

            Ya lo miraré más tranquilamente

            Gracias por tu ayuda

  11. Abraham Serey dice

    15 diciembre, 2014 a las 10:47 PM

    cambiar el width del iframe por 100% eso es todo.

    Saludos.

    Responder
  12. Jordi dice

    11 marzo, 2015 a las 7:04 PM

    Un artículo muy interesante y útil. Hacía tiempo que buscaba alguna manera de hacer que los mapas de Google fueran responsive.
    Lo he probado y me ha funcionado casi a la perfección. No sé si estaré haciendo algo mal pero al incluir el mapa en una página queda un gran espacio en blanco bajo el mapa. He probado a modificar los parámetros del código pero no hay manera de reducir ese espacio en blanco.
    ¿Tienes alguna idea de cual puede ser el problema?

    Muchas gracias!!
    Saludos,
    Jordi

    Responder
    • Pedro Mendez dice

      11 marzo, 2015 a las 7:59 PM

      Pues ni idea Jordi. Si me puedes decir cual es tu sitio web y le echo un ojo

      Responder
      • Jordi dice

        12 marzo, 2015 a las 12:18 PM

        Hola Pedro,
        Te paso enlace: http://www.aluminis-teima.com/contacte/

        Las únicas modificaciones que he hecho al código han sido reducir el ancho y alto al 50% para que el mapa no se vea demasiado grande:

        width: 50% !important;
        height: 50% !important;

        Como verás bajo el mapa queda un gran espacio en blanco.

        Muchas gracias por tu ayuda.

        Saludos,
        Jordi

        Responder
        • Pedro Mendez dice

          12 marzo, 2015 a las 7:46 PM

          Hola Jordi. ¿No has probado en ponerlo en dos columnas? Probablemente quedaría mejor y no tendrías el problema que tienes ahora

          Responder
  13. Jordi dice

    13 marzo, 2015 a las 7:40 PM

    Hola Pedro,
    Muy buena idea lo de ponerlo en dos columnas. Tienes razón: queda mucho mejor y se soluciona el problema.

    Muchas gracias por tu ayuda.

    Responder
    • Pedro Mendez dice

      16 marzo, 2015 a las 1:12 PM

      A ti jordi. Saludos

      Responder
  14. fabian dice

    21 julio, 2015 a las 2:11 PM

    Buen día Pedro, gracias por esta información útil
    quisiera que me hicieras el favor de decirme como sacar el código de google map con la dirección que necesito ? Gracias

    Responder
  15. Bea dice

    14 agosto, 2015 a las 11:28 AM

    Muy buen aporte, ¡muchas gracias!

    Responder
  16. Martina dice

    10 septiembre, 2015 a las 6:36 PM

    Funciona a la perfección.
    Muchas gracias por postear una tutorial tan simple y funcional!
    🙂

    Responder
  17. Lee dice

    9 octubre, 2015 a las 6:41 PM

    Hola amigos, he visto este post y me parece muy bueno.
    El problema que me encuentro es que al entrar a través del móvil, el menú para escoger los mapas y los sitios de interés queda muy pequeño.
    Alguna solución para que el menú de arriba salga mas grande?
    si le das al botón de maximizar te pide para abrirlo a través de maps…pero si es esta incorporado en una pagina será mas difícil entiendo…
    y puestos a preguntar…
    es posible acceder directamente al mapa mostrando solo una capa del mapa, aunque las otras capas estén disponibles, pero al entrar que solo muestre una de ellas.
    Gracias

    Responder
  18. Felipe dice

    23 noviembre, 2015 a las 12:41 PM

    Hola,
    Muy buen articulo, me ha servido mucho, era justo lo que estaba buscando, gracias!
    Sobre lo que comentas al final, sobre una técnica similar para incrustar vídeos… tengo una lista de 4 vídeos (youtube) que necesito que se adapten (responsive) y de momento lo tengo «apañado» pero me gustaría ponerlo bien, responsive como toca. Si me puedes echar un cable 😉
    Gracias de ante mano.

    Responder
    • Pedro Mendez dice

      23 noviembre, 2015 a las 8:34 PM

      Hola Felipe. Quizás este plugin te pueda servir https://wordpress.org/plugins/advanced-responsive-video-embedder/. Ya me cuentas si te vale. Saludos!

      Responder
  19. Chechu dice

    23 noviembre, 2015 a las 1:04 PM

    Funciona genial.
    Muchas gracias!!!

    Responder
  20. Raul dice

    1 noviembre, 2016 a las 3:16 PM

    Me sirvió de mucho su apunte.gracias

    Responder
  21. Jorge dice

    13 diciembre, 2016 a las 1:18 AM

    Hola, quería preguntar si a la hora de insertar el código de Google map, con el Iframe, dejas el width y el height que vienen o los quitas, o le pones valores en porcentaje. Es que a mi me pone el mapa a todo lo ancho de la pantalla y no hay manera de que se vea del ancho de su contenedor la div con la clase google-maps?

    Responder
    • Pedro Mendez dice

      20 diciembre, 2016 a las 9:47 AM

      En el código vienen los valores en porcentajes que vas cambiando a tu gusto

      Responder
  22. silvina dice

    17 marzo, 2017 a las 3:40 PM

    Tambien funciona: cambiando el ancho q esta en px ejemplo width=»1000″ por: width=»100%»

    Responder
  23. Yari dice

    23 marzo, 2017 a las 7:55 PM

    Mil gracias, justo lo que necesitaba.

    😉

    Responder
  24. Brain dice

    11 mayo, 2017 a las 10:20 PM

    Capoooooo!!

    Responder
  25. pc gamer mexico dice

    27 mayo, 2017 a las 5:06 AM

    ya lo probé y funciona perfecto, gracias capo!

    Responder
  26. antonio dice

    22 noviembre, 2017 a las 6:22 PM

    Genial, así da gusto con personas como tú que nos enseñan.
    Muchas gracias.

    Responder
    • Pedro Mendez dice

      23 noviembre, 2017 a las 11:57 AM

      Gracias a ti Antonio por tu apoyo.
      Saludos!

      Responder
  27. Anderson dice

    29 noviembre, 2017 a las 7:56 PM

    Hola, disculpame soy un poco novato en estos temas.

    Exactamente en donde debo pegar ese código ? Lo pego completo en la hoja de estilos (style.css) pero no cambia nada. Debo modificar algo en el iframe de maps que esta pegado en la entrada.

    Gracias por la ayuda.

    Responder
    • Pedro Mendez dice

      30 noviembre, 2017 a las 10:52 AM

      Hola Anderson. Solo tienes que incluir el código en el post, página o widget de tu sitio web. Saludos!

      Responder
  28. Rafa dice

    7 agosto, 2018 a las 7:19 AM

    Hola tengo un problema con el código, me desaparece al agregar la clase al div. Podrias ayudarme por favor.

    Responder
    • Pedro Mendez dice

      9 agosto, 2018 a las 6:33 PM

      Hola Rafa. Cual es tu sitio web?

      Responder
  29. Rodrigo dice

    25 febrero, 2019 a las 6:32 PM

    Permíteme comentarte que me has ayudado. Sabes, deberías utilizar algun blog que te pueda facilitar ingresos en cripto como Steemit. Porque el conocimiento vale. Si tienes una dirección bitcoin o cualquier otra cripto, hazmela legar. De verdad que me ha servido esta información

    Responder
    • Pedro Mendez dice

      26 febrero, 2019 a las 3:46 PM

      Gracias Rodrigo. Si que tengo una dirección para criptos. Puedes ponerte en contacto conmigo desde el formulario y hablamos. Saludos!

      Responder
  30. Marco Osnaya dice

    2 mayo, 2019 a las 12:22 AM

    Eres muy grande! Gracias!

    Responder
  31. Cristian dice

    26 agosto, 2019 a las 12:13 PM

    Viendo que aún hay gente que lo mira añadid un margin-bottom y se apaña. El código quedaría así:

    .google-maps {
    position: relative;
    padding-bottom: 75%; // Ratio de aspecto
    height: 0;
    margin-bottom: -75%;
    overflow: hidden;
    }
    .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }

    😉

    Responder
    • Pedro Mendez dice

      26 agosto, 2019 a las 1:44 PM

      Gracias Cristian! Se agradece tu aportación 😉

      Responder
  32. Jonathan Jose dice

    13 marzo, 2020 a las 5:01 PM

    Me parece que soy el único a quien no le funciona 🙁

    Responder
  33. Omar dice

    31 enero, 2022 a las 9:19 PM

    Muchas gracias por compartir, justo lo que estaba buscando

    Responder
    • Pedro Mendez dice

      31 enero, 2022 a las 11:03 PM

      Gracias a ti por comentar.
      Saudos

      Responder
  34. Nuria dice

    23 marzo, 2022 a las 1:08 PM

    Hola, alguien sabría poner una ubicación exacta en vez de que salga el mapa del mundo

    Responder
    • Pedro Mendez dice

      23 marzo, 2022 a las 6:53 PM

      Buenas,
      No debe de salir el mapa del mundo. Tienes que poner la uticación exacta dentro del código y listo.

      Responder
  35. Wilmer dice

    16 septiembre, 2022 a las 4:31 AM

    Me sirvio gracias para mi pagina

    Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Descarga gratis la guía

guia 14 plugins

Política de privacidad


Más un correo a la semana con algún truco y consejo. ¿Te apuntas?

También con regalos y ofertas

icono Twittericono Facebookicono YouTube

Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (48)
  • Diseño (40)
  • Email Marketing (3)
  • Genesis (4)
  • Google (14)
  • herramientas (23)
  • hosting (8)
  • Marketing en Internet (13)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (24)
  • Sin categoría (22)
  • Trabajo (7)
  • Wordpress (511)

© Copyright 2021 ReInSpirit.com · Todos los derechos reservados ·Aviso legal·Política de Privacidad·Dos Hermanas (Sevilla)