Cómo hacer que funcione el módulo de mapas de Divi

Con las últimas actualizaciones de la API de Maps de Google, resulta un poco más complejo activar los mapas de Divi. Por ahora no se ha actualizado la documentación al respecto desde Elegant Themes, pero aquí te lo explicamos rápido y fácil para que puedas activarlos en pocos minutos.

Antes, utilizar Google maps con Divi era muy fácil ya que no requería gran cosa, ponías la dirección y listo, ya funcionaba. Pero Google ha ido mejorando la API, y ahora es un poco más complejo. Para rizar el rizo, la documentación de Divi aún no está actualizada, por lo que si sigues los pasos desde su web no podrás hacer que funcione.

¿Como hacer para que funcionen los mapas en Divi?

Primero que nada, ahora para utilizar el módulo de mapas de Divi necesitamos una API key de Google, para insertarla aquí (esta pantalla está en el menú de la izquierda de WordPress, busca Divi/opciones del tema):

menú de opciones de Divi

Esta clave la podemos conseguir fácilmente, aquí vemos los pasos:

1.- Nos vamos a nuestro buscador favorito y tecleamos: “clave api google”. Nos vale cualquiera de los dos primeros resultados.

Buscar la clave API de Google

Iremos a la siguiente pantalla, y podemos pulsar cualquiera de estos dos botones (es gratis, no te van a cobrar por este servicio, pero recuerda que debes estar logado con tu cuenta de Google)

obtener clave API de Google Maps

Al pulsar este botón, te dará la opción de crear un nuevo proyecto. Le damos, y le ponemos un nombre, “mapas para la web” o lo que nos parezca, y pulsamos en “create and enable API”

Crear API en Google maps

Tras unos segundos, nos dará un código, que es el que debemos insertar en la web, en Divi/opciones del tema, la opción “Clave Api de Google” (ver primera pantalla). Pero si la ponemos y nos quedamos ahí, podremos ver que los mapas aún no funcionan. ¿Por qué?

Esta es la parte que aún no está explicada en la documentación oficial. Si no te funcionan los mapas, estos son los pasos que te faltan

Haz click en el botón “Finish” para cerrar la ventana emergente (copia primero la clave API, aún no sirve pero servirá). Ahora entra en la Google API console. El enlace está poco más abajo del botón azul “Obtener la clave”.

Google API Console

Te aparecerá un desplegable con la opción por defecto “Crear un proyecto”, pero si lo abres verás el que acabas de crear. Selecciónalo y pulsa en “Continuar”. Llegarás a la pantalla de “Credenciales”, con un menú a izquierda con tres opciones. La que te interesa es la segunda, “Biblioteca”. Pulsa ahí.

Credenciales API

En la biblioteca verás cantidad de APIs que puedes activar, despliega las APIs de Google Maps y activa Google Maps JavaScript API, Google Maps Embed API, y Google Maps Geolocation API. Tienes que pulsar sobre ellas, y en la siguiente pantalla verás un botón que pone “Habilitar”. Actívalo para las tres APIs.

biblioteca


habilitar APIs

Con esto ya funcionarán tus mapas. Desde la consola hay más opciones, como por ejemplo restringir la API para que sólo funcione desde tu dominio, pero no es imprescindible. Con los pasos dados, es suficiente para que funcionen tus mapas en Divi.

Mapas en Divi

 

 

curso Divi actualizado y en español