Para añadir un mapa de Google Maps a una página web, la plantilla Divi cuenta con un módulo específico llamado «Mapa» o «Mapa de anchura completa».
Este módulo es idóneo para mostrar la ubicación en la página de contacto de los negocios que cuentan con presencia física y agregarlo no requiere mucha configuración, pero sí hay que tener en cuenta varios detalles. Además tiene una velocidad de carga bastante rápida.
A continuación vemos paso a paso cómo insertar un mapa de Google Maps en ancho completo a una web con Divi.
Agregar un mapa de Google Maps a Divi
En realidad hay dos módulos del tema Divi con los que poder agregar un mapa; el módulo de anchura estándar y el módulo de anchura completa, aunque ambos funcionan y se configuran igual.
Por lo tanto, los pasos que debes seguir para mostrar un mapa en tu página de contacto de Divi son:
- Abre la edición de la Página en WordPress
- Añade una sección al constructor (estándar o ancho completo). Añade una fila y por último añade el Módulo de Mapa de Divi.
- Ahora personalízalo paso por paso clicando en el icono de las tres líneas del módulo. Además de añadir tu dirección en la casilla Dirección central del Mapa y activar o desactivar que el zoom funcione con el ratón de ordenador, en el apartado Diseño puedes añadir filtros y modificar el tono, saturación, brillo, contraste…del mapa, añadir bordes a la sección, efectos de sombra o animaciones.
Una vez escribas la dirección en el módulo y cliques el botón de «encontrar», se sincronizará con Google Maps (si no funciona, ver más abajo API Key de Google) para mostrar el mapa. El resultado lo puedes ver previamente desde el módulo de Mapa de Divi.
Cómo hacer que el Módulo Mapa de Divi funcione
¿Has realizado los pasos anteriores y no se muestra el mapa?
No te preocupes, tan solo te falta un paso para que el Módulo Mapa funcione correctamente.
Para conectar Google Maps con Divi, necesitas obtener la clave API de Google Maps y añadirla a la plantilla. Para ello, sigue los siguientes pasos:
Entra en la consola de desarrolladores de Google y crea un Nuevo Proyecto.
En la ventana que te aparecerá a continuación, añade un nombre al proyecto o deja el que viene por defecto y clica en el botón «Crear».
Automáticamente te mostrará una clave API con letras y números en una ventana emergente.
Cópiala y pégala después en Divi>Opciones del tema>Clave API de Google. Por último guarda cambios.
Ten en cuenta que para poder obtener esta API Key, tu dominio tiene que ser obligatoriamente https: y estar ya añadido al panel de Herramientas para Webmasters de Google.
Si has seguido todos estos pasos, el mapa de ancho completo debe mostrarse correctamente en tu web.
Mostrar un mapa con dos direcciones en Divi
¿Y si lo que necesitas es mostrar varias ubicaciones en el mapa?
Divi también integra esta opción y es muy sencillo de implementar.
Simplemente tienes que añadirlas en las barras donde pone «Añadir nuevo fijar». La traducción no es muy acertada, pero viene a referirse a añadir un nuevo fijador o pin en el mapa.
Por lo que cada nueva pestaña será una nueva ubiación, en la que puedes insertar un título, una descripción y una dirección. Para editar cada una de ellas, clica en el icono de las tres líneas.
En el caso de la siguiente imagen pongo el ejemplo de una empresa que tuviera tres oficinas en el centro de Madrid y quisiera añadir la ubiación de cada una junto con una descripción.
Con estos simples pasos ya podrás insertar un mapa en Divi en tan solo unos minutos y así poder crear páginas de contacto útiles para tus clientes.
¿Te has quedado con ganas de crear un Módulo de Mapa diferente y más original? Puedes instalar el plugin Map Extended Module con opciones de diseño avanzadas para este módulo.
