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.
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.
Índice de contenidos
Crea las claves API para Google Maps
Para ello debes ir a la consola de desarrolladores de Google y crear un nuevo proyecto.
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.
Una vez creada haz clic en el nombre de la clave API o en el icono del lápiz a su derecha para editarla.
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:
Para finalizar, siempre asegúrate de que tienes habilitadas las APIs siguientes:
- Google Maps Embed API
- Google Maps Geocoding API
- Google Maps JavaScript API
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.
¿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:
- Abre el archivo divi-builder/divi-builder/includes/builder/functions.php y reemplaza la primera línea de este código con la segunda:
wp_enqueue_script( 'google-maps-api', esc_url( add_query_arg( array( 'v' => 3, 'sensor' => 'false' ), is_ssl() ? 'https://maps-api-ssl.google.com/maps/api/js' : 'http://maps.google.com/maps/api/js' ) ), array(), '3', true ); wp_enqueue_script( 'google-maps-api', esc_url( add_query_arg( array( 'key' => 'TU_API_GOOGLE' ), is_ssl() ? 'https://maps-api-ssl.google.com/maps/api/js' : 'http://maps.google.com/maps/api/js' ) ), array(), '3', true );
- 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:
wp_register_script( 'google-maps-api', esc_url( add_query_arg( array( 'v' => 3, 'sensor' => 'false' ), is_ssl() ? 'https://maps-api-ssl.google.com/maps/api/js' : 'http://maps.google.com/maps/api/js' ) ), array(), ET_BUILDER_VERSION, true ); wp_register_script( 'google-maps-api', esc_url( add_query_arg( array( 'key' => 'TU_API_GOOGLE' ), is_ssl() ? 'https://maps-api-ssl.google.com/maps/api/js' : 'http://maps.google.com/maps/api/js' ) ), array(), ET_BUILDER_VERSION, true );
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
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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 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. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Muchas gracias Fernando! Estaba siguiendo los pasos que indican en Elegant Themes, pero no cargaba el mapa de ninguna manera. Ahora he completado los pasos que indicas y genial 😉
Vaya, me alegro. Te reconozco que a mi también me costó, porque mira que pone Google de complicadas algunas cosas 🙂
No sé muy bien donde hay que buscar esa ruta. Por mucho que busco en mi servidor no hay nada relacionado con DIVI. ¿Por el servidor te refieres a mi servicio de almacenamiento que tengo contratado?
Buenos días: ¡ayuda, por favor!
Dónde está esta ruta: divi-builder/divi-builder/includes/builder/functions.php
Gracias
En tu servidor, en la carpeta de plugins
buenos días, estoy utilizando la versión 3.0 y desgraciadamente en mi servidor no aparece esta ruta. Podrías especificar mas donde está? es posible que hayan cambiado dicha ruta?
hola buenas noches tengo un pequeño problema y es que tengo que poner en mapa la ubicacion de donde esta la persona y que trace la ruta hacia la ubiacion del negocio si alguien sabe como se puede hacer esto se los agradeceria mucho
¡Hola! Yo si veo el mapa en mi sitio web, pero no me aparece la flecha… ¿por qué?
¿qué flecha?
Perdón. El marcador que señala la ubicación correcta
Ah, esos son los pines. No te dejará sin API de google maps
Pero ya he habilitado API de Google Maps. Si no lo hubiera hecho tampoco vería el mapa, no?
No, no podrías. Eso se hace ya en el módulo de mapas de divi, añadiéndole ubicaciones
hola Ayuda!… yo ya he puesto el mapa siguendo tus indicaciones (muchas gracias fue lo unico que me sirvio despues de leer varios tutoriales) pero no logro que el mapa me indique el lugar que quiero resaltar, le he puesto la dirección pero me dice que no hay resultados y me manda el mapa de la ciudad en general… gracias, saludos 🙂
No lo localizará bien Google Maps. Tendrás que centrarlo en un lugar más genérico. O eso o dalo de alta el sitio en google maps y añádelo cuando ya esté
Hola Fernando. Ya he registrado y anotado la API en Divi y aún as´çi no aparece el Pin en el mapa. Podras darme una idea de lo que puede ser? Gracias
Hola Fernando, parece que Google sigue haciendo cambios y ahora el servicio de maps va a ser de pago y a partir del 16 de julio será obligatorio crear una cuenta de facturación. ¿te has encontrado con algún caso?
Hay un crédito mensual de 200 dolares pero no se si hay alguna posibilidad de crear la API y utilizar mapas de forma gratuita como hasta ahora. Llegan tiempos de cambio. https://cloud.google.com/maps-platform/user-guide/?hl=es
Por ahora la mejor opción es insertar el iframe que genera Maps. Muy peligroso el API en caso tenga un ataque y se generen peticiones que terminen perjudicando la economía del usuario.
Hola Fernando he seguido todos los puntos indicados en este post y sigue sin verse google maps, tengo la última versión de DIVI y la última versión de WP, y también tengo un theme child de DIVI