These steps should be completed in order to have Google Maps and the Nearby results working correctly with eDirectory:
1- Creating/selecting a project on Google API Console
1.1. While logged in with your Google Account, access the Google Cloud Platform's API Console
1.2. Select a project or create a new one
1.3.If you already have a project created, select it and go to step 2- Enabling Geocoding API and Maps JavaScript API.
1.4. If you don’t have a project yet, click on “New Project“
1.5. Insert your Project name, location or folder, and click on “Create“.
1.6. Now, select the project you want and click on “Open“.
2- Enabling Geocoding API and Maps JavaScript API
2.1. Go to "Library"
2.2. Select the Maps category:
2.3. Click on Geocoding API and Maps JavaScript API or search for them on the search bar.
2.4. Select “Enable” on both of them
Attention: Probably, after clicking on "Enable", Google will request you to link your project to a billing account. This is a necessary step in order to display the maps on your eDirectory website.
3- Creating an API Key for Google Maps
3.1. Go back to the previous screen, click on the menu button and on the option "APIs & Services" :
3.2. Next, click on Credentials > Create credentials > API key
3.3. On the next pop-up screen, click on “Edit API key“
3.4 On your Google maps configuration page, fill in all the required information:
1- Name: You can name it "Google maps"
2-Application restrictions: Select the option "HTTP referrers (web sites)"
3- Website Restrictions: on this field, add the following URLs of your website:
Notice: Replace "test" with your site domain.
Notice: In order to configure Google Maps, first it is needed to have a live domain (URL) connected to your site. If you would like to change the domain of your website, contact our team on the email: support@edirectory.com.
4- API restrictions: on this field, select the following APIs you have enabled on step 2 of this article and hit "Save":
- Maps Javascript API
- Geocoding API
Notice: If you can't find the APIs Geocoding API and Maps Javascript API on the list of APIs to select, please, perform step 2-Enabling Geocoding API and Maps JavaScript API of this article. The APIs need to be enabled as described on step 2. Once they are enabled, they will be displayed on this list.
3.5. You will be redirected to the following screen. Copy the key code by clicking on the "Show key", and a pop-up will be displayed with the API code, click on the button to copy the API as seen below.
3.6. After copying the API key, go to Settings→ Google integrations → Google maps and paste the API key on the Google Maps API field, and check the box to enable it:
Notice: After these steps, Google Maps is already configured correctly. If even after these steps, it is still not displaying, it is due to the fact that Google requires customers to create a billing account for their maps projects before displaying on the site. Here is an article on how to do this: How to enable Billing for Google Maps
How can I know if my new Google maps Key is working? 1. On site manager area, click on Settings > Basic Information, insert any information on the Address boxes and then click outside the box, if a map was generated your API was configured correctly.2. The most common error is related to not enabling Billing on the Google Cloud Project. Please refer to step 5 of this article or check this article for instructions: How to enable Billing for Google Maps Note: If your API key was configured after creating a listing,it's necessary to go to your listings and click on any boxes of address, then click outside the box to generate the map, or just insert the address again and hit "Save changes". If you have any questions, do not hesitate to contact us at support@edirectory.com
4- API Key for Visitor Location Detection & Nearby Results
If you do not intend to use the Nearby Results feature, you may skip this step.
4.1. On the APIs & Services dashboard, click on Credentials > Create credentials > API key
4.2. On the next screen, click on “Edit API key“
4.3. On the configuration page, fill in all the required information:
Name: You can name it "Nearby Results API"
Application restrictions: Select the option "IP addresses (web servers, cron jobs, etc)"
If your website is hosted on one of our shared servers, insert the following IPs:
52.52.23.74
52.9.39.107
54.194.207.47
If your website is self-hosted or hosted on a dedicated server and you do not know the IP address, please contact us at support@edirectory.com for further assistance.
API restrictions: enable "Restrict key", then select both options that you have enabled on step 2 of this article: “Geocoding API” and “Maps JavaScript API”. After that, click on Save.
4.4. You will be redirected to the following screen. Copy the key code by clicking on the "Show key", and a pop-up will be displayed with the API code, click on the button to copy the API as seen below.
4.5. On the site manager section Settings > Language & Geography > Visitor Location Detection & Nearby Results, insert the Google Api Key (Server Key) and click on "Save changes".
5- Activating Google Maps/Linking a credit card to the Google Project
Now, a credit card must be linked to the Google project in order for Google Maps to work correctly. Google only charges for significant traffic, but linking a billing account is mandatory.
Information about billing and pricing can be found at Google Maps Platform Billing and
5.1.Access the Google API Console using the same Google account used to create the API Key.
5.2.Find for your project to make sure Billing will be enabled on the correct Google project.
5.3. Select your Project
5.4. Open the side menu and click on Billing
5.5. Select "LINK A BILLING ACCOUNT"
5.6.You can choose an existing billing account or create a new one