Tutorial Divi: Solución a mapas que no funcionan

El módulo de mapas de Divi y el Constructor Divi es un modo estupendo de mostrar mapas en tus páginas de portada o contacto de manera visualmente atractiva y mejorarlos frente a simplemente insertar un mapa de Google.

Por ejemplo, es especialmente interesante la posibilidad de mostrar varias posiciones en el mapa, personalizándolas a tu gusto.

modulo-mapa-divi

Tanto el mapa a pantalla completa como el módulo de mapa estándar ofrecen visualización de mapas, curiosamente incluso más ligeros de carga que si incrustas un script de Google.

Para que funcionen correctamente los módulos de mapas de Divi un paso previo que debes realizar siempre es pasarte por el menú de administración Divi -> Opciones del tema e introducir la clave API de Google Maps, que también deberías ver desde Divi 3, también en el módulo en el maquetador visual, pues es un requisito de Google.

configurar-api-google-maps-divi

configurar-api-google-mapa-divi-3

Crea las claves API para Google Maps

Para ello debes ir a la consola de desarrolladores de Google y crear un nuevo proyecto.

1-crear-proyecto-consola-desarrolladores-google

Una vez se genere lo primero es pasarse por la sección de Credenciales -> Verificación de dominio para añadir el dominio de tu sitio, que debe ser obligatoriamente https, y estar ya añadido a la Google Search Console, también conocida como Herramientas para webmasters.

El siguiente paso es ir a la sección de Credenciales y crear la API, eligiendo Clave de API en el desplegable.

credenciales-tipo-de-api-consola-desarrolladores-google

Una vez creada haz clic en el nombre de la clave API o en el icono del lápiz a su derecha para editarla.

clave-api-desarrolladores-google

En la siguiente pantalla, en Restricción de clave selecciona URLs de referencia HTTP (sitios web), y en la caja disponible añade tu/s dominio/s, pudiendo usar asteriscos como comodín, para incluir cualquier ruta dentro del dominio, como en el siguiente ejemplo:

editar-api-consola-desarrolladores-google

Para finalizar, siempre asegúrate de que tienes habilitadas las APIs siguientes:

  • Google Maps Embed API
  • Google Maps Geocoding API
  • Google Maps JavaScript API

apis-mapas-habilitadas

Inserta la clave API de Google en las opciones de Divi

Guarda los cambios y ya puedes copiar y pegar la clave API y pegarla en tu mapa de Divi o en las Opciones del tema Divi para que funcione.

clave-api-de-google-maps-en-divi

¿Qué hago si no funcionan los mapas después de introducir la clave API?

Hay situaciones en que puede que no funcionen los mapas  cuando usas el Constructor Divi, a pesar de haber introducido la clave API. Si te pasa esto puedes probar los siguientes pasos:

  1. Abre el archivo divi-builder/divi-builder/includes/builder/functions.php y reemplaza la primera línea de este código con la segunda:

  1. Abre el archivo divi-builder/divi-builder/includes/builder/framework.php y haz lo mismo, sustituye o modifica la primera línea del siguiente código con la segunda:

En cada una de las dos líneas nuevas deberás sustituir TU_API_GOOGLE por tu clave API recién creada y guardar los cambios en los archivos.

El problema con este truco, como ya habrás adivinado, es que en la próxima actualización del Constructor Divi se perderán los cambios y tendrás que volver a hacerlo, pero ya ha comentado el equipo de desarrollo de Elegant Themes que quedará solucionado en las próximas versiones.

Conclusión

mapa-divi

El módulo de mapas del tema Divi funciona siempre correctamente, pero deberás crear tu clave API, así que siempre deberás crearla como hemos visto en la primera parte de este artículo, no así con el Constructor Divi que puede que incluso introduciendo la API falle. No es corriente, no pasa siempre ni de lejos, pero si te pasa así tienes una solución temporal.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (6 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Pin It on Pinterest

Share This