In this article, we will guide you through the process of configuring two essential APIs for your eDirectory website: Google Maps and Nearby Results API. These APIs work together to display maps on your site and show relevant listings based on the user's location.


Introduction


Google Maps API is responsible for displaying maps in your listings, while the Nearby Results API ensures that users see listings near their location on the search page. In this comprehensive guide, you will find step-by-step instructions for configuring both APIs.


Instructions for Google Maps API:



1. Creating 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. Click on "Select a project" and "New project".


   1.3. Insert the following information:

      

      Project name: type your site name.

      Organization: select your organization.

      Location: select your location.


     Once the information is filled, click on "Create"


   1.4. After creating the project, click on the menu button, select "APIs & Services", click on "Library". 




  1.5. Select the Maps category:




     1.6. Click on Geocoding API and Maps JavaScript API or search for them on the search bar.


   




  1.7 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. Please, configure your billing after enabling the abovementioned APIs. 
Follow the onscreen instructions to link a billing account to your Google Maps project. Please, note that this step is essential to display the map on the site. Google will not allow the display of the maps on the site unless a billing account is configured, since they charge to use their API. 

Check this Google article to learn more on how they charge for their API: Google Maps Platform Billing



   1.8. Click on the menu button, APIs & Services and on the option "Enabled APIs & services" :





 1.9 Next, click on Credentials → Create credentials →  API key

1.10 On the next pop-up screen, click on “Edit API key“




   1.11 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: When setting up your website restrictions, ensure that you replace "test"with your actual domain name. Additionally, pay close attention to the formatting of the URLs:

Incorrect: https://www.test.com/ ❌
Correct: https://www.test.com ✔️

URLs ending with a forward slash (/) may prevent Google Maps from functioning properly. To avoid issues, always omit the forward slash at the end of the link when configuring URLs in the website restrictions field.




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 1.7 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 1.7 of this article. The APIs need to be enabled as described on step 1.7. Once they are enabled, they will be displayed on this list.


1.12. 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. 



 

1.13. 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?

If you've recently configured a new Google Maps API key and want to ensure it's functioning correctly, here are some steps you can take to verify its effectiveness:

1. Check the maps display: 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.Google maps billing: The most common error is related to not enabling Billing on the Google Cloud Project. Please refer to step 3 of this article or check this article for instructions: How to enable Billing for Google Maps

3: Update listings: If your API key was configured after creating listings, you may need to update them to display maps. The listings might not be displaying the maps in their backend:
In order to update the listings to display the map, follow the guidelines:

  2.1 Click inside the zip code field
  2.2 Click outside the zip code field (anywhere in the page)
  2.3 After the two previous steps, the maps will display with the listing.

After updating the listing, it displays the map:

4. Allow maps display: Ensure that your listing levels are configured to display maps on their detail page. Follow these steps: 

   4.1. Navigate to "Settings" →"Manage levels & Pricing."
   4.2. Allow the listing levels to display maps in their detail page.


This step is crucial to guarantee that maps can be displayed on your site.

If you encounter any issues during this verification process or have further questions, do not hesitate to contact our support team at support@edirectory.com. We're here to help and ensure your Google Maps integration is seamless and functional.




Instructions for Nearby Results API


2.  API Key for Visitor Location Detection & Nearby Results


Note:If you do not intend to use the Nearby Results feature, you may skip this step.



    2.1. On the APIs & Services dashboard, click on Credentials → Create credentials → API key

   2.2. On the next screen, click on “Edit API key“


 


 2.3. On the configuration page, fill in all the required information: 

1-Name: You can name it "Nearby Results API"


2- 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.233.157.59



Note: 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.



3- API restrictions: enable "Restrict key", then select both options that you have enabled on step 1.7 of this article: “Geocoding API” and “Maps JavaScript API”. After that, click on Save.




2.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. 





2.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".


Notice: It is important to notice that the API key required for Google Maps integration and the API key (server key) for Nearby Results are not the same. They serve different purposes and have distinct configurations.

The key used for Google Maps integration is typically associated with the Google Maps JavaScript API for displaying maps on a website. On the other hand, the API key (server key) for Nearby Results is used for accessing and retrieving information about places and locations in the vicinity.



Once the nearby results is set up, users can filter search results by distance, showing the users how far they are from a listing based on their location.




3- 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, and Nearby results 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 

Google Platform Pricing.

 

  3.1.Access the Google API Console using the same Google account used to create the API Key.

  3.2.Find for your project to make sure Billing will be enabled on the correct Google project.


  3.3. Select your Project


3.4. Open the side menu and click on Billing


3.5. Select "LINK A BILLING ACCOUNT"

3.6.You can choose an existing billing account or create a new one


After clicking to create a billing account, Google will request your personal information as well as a verification. Fill out all the required information, and your Google Maps and Nearby results APIs will be working properly.


If you have any questions or encounter issues, feel free to contact us at support@edirectory.com. Happy mapping!