For using the map module on any page you will need an API key and then only you will able to use the map module anywhere on the page.
Follow the steps to generate the API key for Map Module:-
- Open the given link –
- On opening the link you will be redirected to the following page
- Click on “Continue”.
You can give the name as I have named “Map Module” and then in the next section you will need to add the referrer websites on which you want to use API, This section is not mandatory and I will strongly recommend you to leave this as it sometimes creates unnecessary problems.
After this click on “create” button and then you will have a key.
After getting the API key of Map Module,
- Please go to >> Divi >> Theme Options >> General Settings >> and paste the API Key in “Google Maps API Key” field.
After the integration process, we will see that how we can use Map module on any page. We can also use the map module in full-width format and can also define some pins to the map with its starting location. And now for using map module on any page follow the steps below:-
- Add the map module on any page
- Go to the map module setting there we will found General settings, Advance Design setting, Custom CSS.
For General Settings
- New pin
- Google API Key
- Map center Address
- Mouse wheel Zoom
- Draggable on mobile
- Disable On
- Admin Label
In the above all first go to Map Center Address and select the Area which you want to make center Address, then you will need to click on New pin and manage the settings accordingly.
You can also use Advanced Design Setting and custom CSS for a little heavy Customization.
After all this, there can be many issues related to Google map API key which you can face. You can check those issues in the console window of the browser.
To check in console please follow given instructions:-
- Open that page where you are having the problem
- Right click on the page inside the browser and go to “Inspect Elements” or in some browsers go to “Inspect”
- A new window will open
- Go to console tab (Here you will find the errors related to Google Map API)
Some of the common Errors related to Google Map API:-
There are some common errors please refer to the table below:-
|ExpiredKeyMapError||Error||The API Key which you are using has been expired so generate a new API key.|
|InvalidKeyMapError||Error||Please Paste the Correct API key without any Special Characters including space.|
|MissingKeyMapError||Error||Please paste the Google API key to the "Google Map API" field of "Divi Theme Option ".|
|RefererNotAllowedMapError||Error||Please leave "Referrers websites" field empty while generating API key.|
|NoApiKeys||Error||Please paste the Google API key to the "Google Map API" field of "Divi Theme Option ".|
If you are having any problem in generating API key then you can also use the following open ended key
We Hope this article will help you to learn how to use Google Map module. If you liked the article then please subscribe us. We will be happy to hear your comment on any other Google Map related problems.
You May Also Like
- Tested on Divi Version 2.7.8
- While Generating Key, try to leave the “Referrer” field Blank.