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:
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 );
  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:
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

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(8 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

19 comentarios en “Tutorial Divi: Solución a mapas que no funcionan”

  1. 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 😉

    1. Rafael Salinas Villegas

      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?

  2. Manuel Rodríguez

    Buenos días: ¡ayuda, por favor!

    Dónde está esta ruta: divi-builder/divi-builder/includes/builder/functions.php

    Gracias

  3. 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?

  4. 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

          1. Pero ya he habilitado API de Google Maps. Si no lo hubiera hecho tampoco vería el mapa, no?

          2. 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 🙂

          3. 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é

  5. Rafa Clariana

    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

  6. 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

  7. 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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido