Crear un mapa de Google responsive

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:

1. Crear un nuevo elemento bloque de texto (Text block).
2. En el editor de contendo, pinchar en la pestaña de «Text».
3. Introducir el contenido copiado.
4. 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.