Solution to maps that do not work

The map module of Divi and the Constructor Divi is a great way to show maps in your pages of cover or contact in a visually appealing way and improve them compared to simply inserting a Google map.

For example, it is especially interesting the possibility of showing several positions on the map, personalizing them to your taste .


Both the full-screen map and the standard map module offer map visualization, curiously even lighter-weight than if you embed a script from Google.

For the Divi map modules to work correctly a previous step you should always do is go through the administration menu Divi -> Theme options e enter the c lave Google Maps API which you should also see from Divi 3 also in the module in the visual layout, since it is a requirement of Google.

 configurar-api-google -maps-divi


Create the API keys for Google Maps

To do this you must go to the developer console Google and create a new project.


Once generated the first thing is to go through the Credentials section -> Verification of domain to add the domain of your site, which must be necessarily https and be already added to the Google Search Console also known as Webmaster Tools.

The next step is to go to the Credentials section and create the API, choosing API key in the drop-down.


Once created click on the name of the key API or the pencil icon on the right to edit it.


On the next screen, in Password Restriction select URLs from HTTP reference (websites), and in the available box add your domain (s), being able to use asterisks as a wildcard, to include any route within the domain, as in the following example:

 edit-api Finally, make sure you have the following APIs enabled: </p>
<li> Google Maps Embed API </li>
<li> Google Maps Geocoding API </li>
<li> Google Maps JavaScript API </li>
<p><img class=

Insert the Google API key into the Divi options

Save the c You can copy and paste the API key and paste it into your Divi map or Divi Theme Options to make it work.


What do I do if the maps do not work after entering the API key?

There are situations in which the maps may not work when you use the Divi Constructor despite having entered the API key. If this happens to you, you can try the following steps:

  1. Open the file divi-builder / divi-builder / includes / builder / functions.php and replace the first line of this code with the second one: [19659035] wp_enqueue_script ('google-maps-api', esc_url (add_query_arg (array ('v' => 3, 'sensor' => 'false'), is_ssl ()? 'Https: // maps-api-ssl.': '')), array (),' 3 ', true);
    wp_enqueue_script ('google-maps-api', esc_url (add_query_arg (array ('key' => 'TU_API_GOOGLE'), is_ssl ()? ' ':' ')), array (),' 3 ', true);

    wp_enqueue_script ( ' google-maps-api ' esc_url ( add_query_arg ( array ( ' v ' = > 3 , 'sensor' = > 'false' ) is_ssl () ? '' : ' / api / js ' ) ) array () ' 3 ' true ) ;

    wp_enqueue_script ( ' googl e-maps-api ' esc_url ( add_query_arg ( array ( ' key ' = > ] 'TU_API_GOOGLE' ) is_ssl () ? 'https: // maps-' : '' ) ) array () '3' true ]) ;

  1. Open the file divi-builder / divi-builder / includes / builder / framework.php and do the same, replace or modify the first line of the following code with the second :

On each of the two new lines you must replace TU_API_GOOGLE with your newly created API key and save the changes to the files.

The problem with this trick, as you may have guessed, is that in the next update of the Divi Constructor the changes will be lost and you will have to return to do it but the development team of Elegant Themes has already commented that it will be solved in the next versions.


 mapa-divi "width =" 838 "height =" 399 "srcset = " 840w, -550x262.png 550w, 768w, /mapa-divi.png 940w "sizes =" (max-width: 838px) 100vw, 838px "/> </p>
<p> <strong> The map module of the Divi theme always works correctly </strong>but you must create your API key , so you should always create it as we have seen in the first part of this article, not so with the Divi Constructor that may even introduce the API fails. It is not current, it does not always happen at a distance, but if it happens to you, you have a temporary solution. </p>
<div id= Loading …

That may also help you: