Índice de contenidos
Crear e insertar un mapa de Google en HTML y con diseño responsive
En esta entrada se va a detallar cómo crear e insertar mapa de Google en HTML con diseño responsive. Google Maps permite insertar o incluir mapas en nuestra página web de forma gratuita, es una forma de presentar a nuestros visitantes o clientes dónde encontrar la localización de unas oficinas, restaurante, calle, etc.
Esta entrada detalla cómo usar Google Maps sin su API, por lo que estaremos usando Google Maps gratis en WordPress, aunque este tutorial puede valer para incluir este mapa en otras plataformas web.
De forma predeterminada los mapas de Google no tienen diseño adaptable a móviles, es por ello que vamos a «retocar» el mapa de Google a través de CSS, así, nuestro mapa de Google se mostrará correctamente en todas las resoluciones y se dará respuesta a la pregunta de ¿cómo crear un mapa de Google responsive?
Buscar la localización a mostrar
Ir a Google Maps, buscar la dirección de la localización a mostrar y hacer click en «Compartir».

Seleccionar el tamaño del mapa
Pinchar en la pestaña de «Insertar un mapa».

Al hacer click en la opción de «Mediano», seleccionar la opción de «Tamaño personalizado» e introducir el tamaño del mapa deseado, en este caso se introduce un tamaño de 800 píxeles de largo por 400 píxeles de ancho.
Por último pulsar el botón de «Copiar HTML».

Modificar el iframe copiado
El código copiado se debe envolver dentro de una capa div, dicha capa debe tener la clase de nombre «map-responsive».
<div class="map-responsive"> <!-- Incluir aquí el iframe copiado de Google --> </div>
Una vez que tenemos el código copiado de Google envuelto en el div, se debe acudir a la página en donde se quiere presentar el mapa.
Dónde pegar el iframe de Google Maps en Avada
Suponer que se quiere introducir el mapa de Google en esta misma entrada, los pasos a seguir son:
- Crear un nuevo elemento bloque de texto (Text block).
- En el editor de contendo, pinchar en la pestaña de «Text».
- Introducir el contenido copiado.
- Pulsar en «Guardar».
Quedará algo similar a lo que aparece en la imagen siguiente.
El próximo paso es añadir el CSS personalizado a nuestro tema, de esta forma se otorgará al mapa de Google un diseño web responsive, provocando una correcta visualización del mismo en todas las resoluciones.
Añadir código CSS personalizado a tu tema
Añade el siguiente código CSS personalizado a tu tema.
/* Start: Google Maps Responsive */ .map-responsive { overflow:hidden; padding-bottom:400px; /*Reduce este valor si el mapa fuera muy alto, por ejemplo 250px, puedes usar porcentajes, 50%*/ position:relative; height:0; } .map-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; } /* End: Google Maps Responsive */
Cómo añadir CSS personalizado en Avada
Acude a Administración web > Avada > Opciones del tema > CSS Personalizado y ahí pega el código CSS.
Conclusiones y mapa
Esta es la forma de presentar actualmente mapas de Google sin tener que usar su API y pagar por ello, antiguamente, cuando los mapas eran «gratis» había gran cantidad de plugins para crear y personalizar estos mapas. No obstante si necesitas utilizar la API de Google para utilizar sus mapa, aquí tienes toda la información.
Por último, presentar el resultado de seguir este tutorial para insertar mapas de Google y que además cuentan con diseño responsive, por lo que el mapa se visualizará correctamente en cualquier dispositivo.
Muy buen aporte
Muchas gracias, me alegra ver que sea útil
Código sencillo y funcional!! Muchas gracias por esta excelente aportación!!!!
Hola Ana!
Muchas gracias por tu comentario, me alegra ver que sirve de ayuda!
Perfecto, no había pensado que se podría solucionar con un poco de CSS, a veces nos complicamos la vida diseñando webs. Muchas gracias!
Me alegro que sea de ayuda Daniel!
Cierto es que hay ocasiones es que hacemos sobre-ingenieria para cosas que pueden ser sencillas…
Un saludo!
Muy bueno! Quería preguntarte, si nos encontramos con la necesidad de tener un mapa del mundo sobre el que irle posicionando marcadores (vía coordenadas), sería viable usar esta opción que nos has mostrado en el post? Si no fuese así, qué opción te parece más interesante?
Hola Gustavo,
Te vale el método que comento en la entrada, siempre que el elemento esté sobre un «iframe».
En caso contrario tendrías que jugar con el CSS.
Ya me dirás si te has servido 😉
¡Un saludo!