This is a step by step guide to link your Google Cloud Platform with your Divi Theme Map Module on your WordPress site
Table of contents:
- Go to Google Cloud Platform Page
- Create your project.
- Enable the APIs for your Divi Theme Map Module.
- Create your API Credentials.
- Enter API Key into Divi Theme Options
This guide assumes you have a Google Account and have gotten acquainted with Google Cloud Platform.
Is your Divi Theme Map Module not working?
There are 3 typical reasons your Divi Theme Map module is not working.
One, you don’t have the proper APIs Enabled within Google Cloud Platform.
Two, you don’t have billing enabled in your account with Google Cloud Platform.
Three, you may be forgetting to copy over your API key into the Divi Theme Options.
Start by going to Google Cloud Platform Page.
Go to the Google Cloud Platform page.
It’s accessible from here:
As of February 2022, the platform home page looks like this:
Make sure you are logged in to you Google Account.
The indicator in the top right corner will be colored, in this case it is red with a J.
Next, click on Console in the top right hand corner.
Create your project.
Once in the console, select the project tab drop down menu from the top left hand corner.
You will be granted with a pop-up tab that looks akin to this:
Other project information has been blacked out for privacy reasons.
First off consider if you want to add a new project or work off an existing one.
For strictly organization purposes it will be best to create a new project, press the button in the top right corner.
For the purposes of this tutorial we will create a new project.
This would be especially important if you are looking to have several subdomains or branches of websites within the same general category.
Select New Project
You will be asked to select an organization. This is optional.
We left it blank for these purposes, but you can learn more about Google Cloud Platform organizations and their uses on the Google Cloud Platform website.
Enable the APIs for your Divi Theme Map Module
Now go back to the top left tab for the projects drop down.
You will want to select the project you just created.
You will know if you have selected the right project by looking at the tab, it should have the name of the project on there.
Fields you can check are located at yellow box locations in the image below!
We can now navigate to the APIs & Services tab on the left hand side of the screen.
Hover over the tab and select Enabled APIs & services, select it.
You are now in the APIs & Services page. On the top, just under the blue bar, select the “+ ENABLE APIS AND SERVICES” button.
To get your Divi Map to function properly, and to geo-locate to pinned location as you want please ensure you select and enable three APIs from the API Library:
Three APIs You Need to Enable
Geocoding API
Geolocation API
Maps JavaScript API
Using all three of these enabled will allow your WordPress Divi website to function.
You will be able to pin multiple locations.
You will not get any error messages on the map.
You will be able to enter an address or even a longitude and latitude in order for the map to pin a location for you.
The Elegant Themes Divi Map Module support multiple pins.
This is very useful on showing multiple business locations on a contact page or locations page for reader information and to designate a service area on the website.
After enabling these three APIs navigate to the Credentials tab on the left.
Create your API Credentials
Click to CREATE CREDENTIALS.
The credentials tab is available from the left tab menu.
The create credentials button is at the top of the page, under the blue bar.
In our scenario we have already created the API Key.
You can see this in the API key field.
You will be provided the key.
Copy it.
Enter your API Key into Divi Theme Options
Go into your Divi Theme Options on your WordPress site and scroll down until you see the Google API key field.
Divi Theme Options is available from your WordPress dashboard side menu.
Paste your API key there. The yellow highlighted field in the picture above.
Save the changes as per usual with any Divi Theme Options tabs changes.
Awesome!
You’ve successfully linked up your Divi Maps Module to Google Cloud Platform.
When you go to your Visual Builder in the pages section you will no longer get an error code.
The Divi Theme Map Module can now be saved to your Divi library.
Re-use the module as you need on various pages throughout your site.
The Full-width Divi Theme Map Module can use the same instructions.
Is your Divi Theme Map Module not working still?
Troubleshooting to Add Google Map in Divi
Remember to save and reload your page.
Also, it may be worth it to delete the map module and set a new one.
If you are still getting an error code there are two problems you should consider.
Too Many Projects
You have too many projects within your current free plan, this will prompt your to upgrade to a Google Cloud Platform with more projects available.
You Never Enabled Billing
You have not enabled billing on your Google Cloud Platform account.
If you have not enabled billing on your Google Cloud Platform account then no APIs realistically will be working for you.
Try out both options described above.
If you are still having problems it is suggested you re-read all above steps.
Alternatively read the Google Cloud Platform Documentation for more details.
Did you find this post useful?
If so, share it with your friends and colleagues.
0 Comments