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 –

https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend&keyType=CLIENT_SIDE&reusekey=true

  • On opening the link you will be redirected to the following page

google map api

  • Click on “Continue”.

google map api2

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.

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

divi theme options

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.

map module settings

map module settings2

map module settings3

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”

map module map

  • A new window will open
  • Go to console tab (Here you will find the errors related to Google Map API)

inspector

Some of the common Errors related to Google Map API:-

There are some common errors please refer to the table below:-

Error CodeMessageDescription
ApiNotActivatedMapErrorErrorThe API key which you have generated from the Google API Console is not Active. Please Activate it from Google Console and the use. For more please refer here https://www.weardigital.co.uk/blog/google-maps-api-javascript-issues/
ExpiredKeyMapErrorErrorThe API Key which you are using has been expired so generate a new API key.
InvalidKeyMapErrorErrorPlease Paste the Correct API key without any Special Characters including space.
MissingKeyMapErrorErrorPlease paste the Google API key to the "Google Map API" field of "Divi Theme Option ".
RefererNotAllowedMapErrorErrorPlease leave "Referrers websites" field empty while generating API key.
NoApiKeysErrorPlease 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.
Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

Subscribe To Our Newsletter For More Tips & Tricks on Elegant Themes

You have Successfully Subscribed!

Share This