๐Ÿ“ Integrations & Tracking

How to add Google Maps to your Contact Page

How to Get Your Google Maps API Key (Step-by-Step)

Follow these instructions to generate a working Google Maps API key for your website. This guide covers everything from creating the project to enabling the right services and setting permissions.


Step 1: Sign In to Google Cloud Console

  1. Visit the Google Cloud Console.

  2. Sign in using your Google account. If you don't have one, you'll need to create one first.


Step 2: Create a New Project

  1. In the top navigation bar, click on the Project drop-down.

  2. Click New Project.

  3. Enter a Project Name (e.g., "My Website Maps").

  4. Select an Organization if needed, or leave it at "No organization."

  5. Click Create.


Step 3: Enable Billing

  1. In the sidebar, click Billing.

  2. Link a billing account if you havenโ€™t already.

    • If you don't have one, youโ€™ll be prompted to create a new billing account.

    • Note: Google offers $200/month of free usage, which covers most small to medium sites.

  3. Assign the billing account to your new project.


Step 4: Enable the Required APIs

  1. Make sure your new project is selected.

  2. Go to APIs & Services > Library.

  3. Search for and Enable the following APIs:

    • Maps JavaScript API

    • Geocoding API

  4. To enable an API, click it, then click the blue Enable button.


Step 5: Create API Credentials

  1. Go to APIs & Services > Credentials.

  2. Click + CREATE CREDENTIALS > API key.

  3. A new API key will be generated. Copy this key โ€” youโ€™ll need it later.


Step 6: Restrict the API Key (Highly Recommended)

  1. Under the API Keys section, click Edit next to the key you just created.

  2. In Application restrictions, choose HTTP referrers (websites).

  3. Under Website restrictions, add your domain

    https://www.yourdomain.com/
  4. In API restrictions, choose Restrict Key, and then select:

    • Maps JavaScript API

    • Geocoding API

  5. Click Save.


Step 7: Complete the OAuth Consent Screen

(This is sometimes required even for Maps if Google prompts you.)

  1. Go to APIs & Services > OAuth consent screen.

  2. Choose External and click Create.

  3. Fill out the following:

    • App Name: Your Company Name

    • User Support Email: Your Email

    • Developer Contact Information: Your Email

  4. Save and continue through the steps (you can leave Scopes and Test Users blank unless otherwise instructed).

  5. Click Publish.


Step 8: Insert the API Key into Your Website

  1. Log in to the admin portion of your website
  2. Go to Integrated Apps > Google > Maps
  3. Paste your Google Maps API into the "API Key" field. 
  4. Select one of your locations as the Central Location.
  5. Click Submit.


Final Notes

  • It can take a few minutes for new API settings to propagate.

  • Be sure to test the Contact page after inserting your key to confirm the map loads properly.

  • Keep your API key private. If it ever leaks, regenerate it and update your website.