How to Activate Google Maps on eDirectory

Introduction

This guide provides a comprehensive, step-by-step process for configuring the Google Maps API on your eDirectory website. The Google Maps API is crucial for displaying interactive maps within your listings, enhancing the user experience and providing valuable location context. By following these instructions, you will be able to seamlessly integrate this essential feature into your site.

Instructions for Google Maps API Integration:

Step 1: Create a Project in the Google Cloud Platform Console:

    • 1.1. Ensure you are logged into your Google Account and navigate to the Google Cloud Platform's API Console.
    • 1.2. Click on the "Select a project" dropdown at the top and then select "New project."

    • 1.3. Fill in the following project details:
      • Project name: Enter a descriptive name, such as your site's name.
      • Organization: If applicable, select your organization from the dropdown.
      • Location: Choose the relevant location for your project.
    • Once the information is complete, click "Create."

Step 2: Enable the Geocoding and Maps JavaScript APIs:

    • 2.1. After your project is created, click the menu button (usually three horizontal lines), hover over "APIs & Services," and click "Library."

    • 2.2. In the API library, either scroll down to find the "Maps" category or use the search bar at the top.

    • 2.3. Click on both "Geocoding API" and "Maps JavaScript API" individually.

    • 2.4. On each API's page, click the "Enable" button.

Important: 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

Step 3: Create the Google Maps API Key:

    • 3.1. Click the menu button, navigate to "APIs & Services," and select "Enabled APIs & services."

    • 3.2. Click on "Credentials" in the left-hand menu, then click "+ Create credentials" and choose "API key."

    • 3.3. In the pop-up window that appears, click "Edit API key" (the pencil icon next to the newly created key).

    • 3.4. On the Google Maps API key configuration page, fill in the following details:
      • 1. Name: You can name the key descriptively, for example, "eDirectory Google Maps Key."
      • 2. Application restrictions: Select the option "HTTP referrers (web sites)."
      • 3. Website Restrictions: In this field, add the following URLs for your website, replacing "test.com" with your actual domain name:
https://www.yourdomain.com
https://yourdomain.com
http://www.yourdomain.com
http://yourdomain.com

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

Note: Before configuring Google Maps, ensure you have a live domain (URL) connected to your eDirectory site. If you need to change your website's domain, please contact our support team at support@edirectory.com.

      • 4. API restrictions: In this section, select the following APIs that you enabled in step 2 of this guide:
        • Maps JavaScript API
        • Geocoding API

Note: If you do not see these APIs in the list, please go back to step 2.4 and ensure they are enabled. Once enabled, they will appear in this list.

    • 3.5. After filling in the information, click "Save." You will be redirected to the Credentials page. Click the "Show key" button next to your newly created API key. A pop-up will display your API key. Click the copy icon to copy it.

Step 4: Integrate the Google Maps API into eDirectory:

    • 4.1. In your eDirectory Site Manager, navigate to "Settings" → "Google Integrations" → "Google Maps."
    • 4.2. Paste the copied API key into the "Google Maps API" field and check the box to enable it.

Link Your Project to a Billing Account for Nearby Results (If Applicable):

While the above steps enable the map display, certain features like "Nearby Results" also rely on the Google Maps Platform and require billing to be enabled. If you intend to use "Nearby Results," please follow the instructions in this guide to ensure seamless functionality: How to enable Billing for Google Maps and Nearby Results.

How can I know if my new Google Maps Key is working?

If you've recently configured your Google Maps API key and want to confirm it's working correctly, follow these steps:

  1. Check Map Display in Basic Information: In your Site Manager, go to "Settings" → "Basic Information." Enter any address information in the address fields and then click outside the field. If a map is generated, your API key is likely configured correctly.

  1. Verify Google Maps Billing: The most common issue is forgetting to enable billing in your Google Cloud Project. Refer to How to enable Billing for Google Maps](insert link to billing guide) for instructions.
  2. Update Existing Listings: If you configured the API key after creating listings, you might need to update them to display maps. The maps might not appear in the listing's back-end initially. To update a listing:
    • 3.1. Click inside the zip code field.
    • 3.2. Click outside the zip code field (anywhere on the page).
    • 3.3. The map should now display within the listing's details.

  1. Ensure Map Display is Enabled in Listing Levels: Verify that your listing levels are configured to show maps on their detail pages:
    • 4.1. Navigate to "Settings" → "Manage levels & Pricing."
    • 4.2. For each relevant listing level, ensure the option to display maps is enabled.

If you encounter any issues during this verification process or have further questions, please do not hesitate to contact our support team at support@edirectory.com. We are here to assist you.

Conclusion

Successfully configuring the Google Maps API is essential for providing a visually rich and informative experience on your eDirectory website. By carefully following these steps to create a project, enable the necessary APIs, generate and integrate the API key, and ensure billing is enabled, you can seamlessly display maps and enhance the location-based features of your platform. Remember to verify your configuration and update existing listings as needed. If you require any further assistance, our support team at support@edirectory.com is always ready to help.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.