1. Home
  2. Knowledge Base
  3. Website setup
  4. How to Set Up Google Maps for Your Website

How to Set Up Google Maps for Your Website

(Maps JavaScript API Guide)

Overview

To display an interactive Google Map on your website, Google requires a Google Cloud project with the Maps JavaScript API enabled. This is a one-time setup and ensures your map is secure, reliable and compliant with Google’s usage requirements.

Most standard business websites fall within Google’s free monthly usage allowance.

What You’ll Need

  • A Google account (Gmail or Google Workspace)
  • A debit or credit card (required by Google for billing setup)
  • Around 10–15 minutes

Step 1: Create or Sign In to a Google Account

If you already use Gmail or Google Workspace, you can use that account.

👉 Create a Google account:

https://accounts.google.com/signup

👉 Sign in to Google Cloud Console:

https://console.cloud.google.com

Step 2: Create a Google Cloud Project

  1. In Google Cloud Console, click Select a project (top navigation)
  2. Click New Project
  3. Enter a project name Example: Company Name – Website Map
  4. Click Create

👉 Google Cloud Console projects page:

https://console.cloud.google.com/projectcreate

Step 3: Enable Billing (Required)

Google Maps APIs require billing to be enabled, even if usage stays within free limits.

  1. In the main menu, go to Billing
  2. Create or link a billing account
  3. Assign it to your new project

👉 Billing setup page:

https://console.cloud.google.com/billing

💡 You can set spending alerts to avoid unexpected charges (recommended).

Step 4: Enable the Maps JavaScript API

  1. Go to APIs & Services → Library
  2. Search for Maps JavaScript API
  3. Click Enable

👉 Direct link to Maps JavaScript API:

https://console.cloud.google.com/apis/library/maps-backend.googleapis.com

Step 5: Create an API Key

  1. Go to APIs & Services → Credentials
  2. Click Create Credentials
  3. Select API Key
  4. Copy the API key — you’ll need to provide this to your web developer

👉 Credentials page:

https://console.cloud.google.com/apis/credentials

Step 6: Secure the API Key (Very Important)

To prevent unauthorised use, your API key should be restricted.

Restrict by Website (HTTP Referrers)

  1. Click on the API key to edit it
  2. Under Application restrictions, select Websites
  3. Add your website domains, for example:
    • https://www.yourwebsite.co.uk/*
    • https://yourwebsite.co.uk/*
    • Include staging or test domains if applicable

Restrict by API

  1. Under API restrictions, choose Restrict key
  2. Select Maps JavaScript API
  3. Save changes

To manage costs:

  1. Go to Billing → Budgets & alerts
  2. Create a monthly budget
  3. Enable email notifications

👉 Budgets & alerts page:

https://console.cloud.google.com/billing/budgets

What to Send Your Web Developer

Once setup is complete, please provide:

  • ✅ Your Google Maps API key
  • ✅ Confirmation billing is enabled
  • ✅ A list of approved website domains (live and staging)

Why This Is Required

Google requires this setup to:

  • Protect your account from unauthorised usage
  • Ensure billing transparency
  • Allow interactive maps to function correctly

This is a standard Google requirement and applies to all modern websites using Google Maps.

Need Help?

How to Set Up Google Maps for Your Website

(Maps JavaScript API Guide)

Overview

To display an interactive Google Map on your website, Google requires a Google Cloud project with the Maps JavaScript API enabled. This is a one-time setup and ensures your map is secure, reliable and compliant with Google’s usage requirements.

Most standard business websites fall within Google’s free monthly usage allowance.

What You’ll Need

  • A Google account (Gmail or Google Workspace)
  • A debit or credit card (required by Google for billing setup)
  • Around 10–15 minutes

Step 1: Create or Sign In to a Google Account

If you already use Gmail or Google Workspace, you can use that account.

👉 Create a Google account:

https://accounts.google.com/signup

👉 Sign in to Google Cloud Console:

https://console.cloud.google.com

Step 2: Create a Google Cloud Project

  1. In Google Cloud Console, click Select a project (top navigation)
  2. Click New Project
  3. Enter a project name Example: Company Name – Website Map
  4. Click Create

👉 Google Cloud Console projects page:

https://console.cloud.google.com/projectcreate

Step 3: Enable Billing (Required)

Google Maps APIs require billing to be enabled, even if usage stays within free limits.

  1. In the main menu, go to Billing
  2. Create or link a billing account
  3. Assign it to your new project

👉 Billing setup page:

https://console.cloud.google.com/billing

💡 You can set spending alerts to avoid unexpected charges (recommended).

Step 4: Enable the Maps JavaScript API

  1. Go to APIs & Services → Library
  2. Search for Maps JavaScript API
  3. Click Enable

👉 Direct link to Maps JavaScript API:

https://console.cloud.google.com/apis/library/maps-backend.googleapis.com

Step 5: Create an API Key

  1. Go to APIs & Services → Credentials
  2. Click Create Credentials
  3. Select API Key
  4. Copy the API key — you’ll need to provide this to your web developer

👉 Credentials page:

https://console.cloud.google.com/apis/credentials

Step 6: Secure the API Key (Very Important)

To prevent unauthorised use, your API key should be restricted.

Restrict by Website (HTTP Referrers)

  1. Click on the API key to edit it
  2. Under Application restrictions, select Websites
  3. Add your website domains, for example:
    • https://www.yourwebsite.co.uk/*
    • https://yourwebsite.co.uk/*
    • Include staging or test domains if applicable

Restrict by API

  1. Under API restrictions, choose Restrict key
  2. Select Maps JavaScript API
  3. Save changes

To manage costs:

  1. Go to Billing → Budgets & alerts
  2. Create a monthly budget
  3. Enable email notifications

👉 Budgets & alerts page:

https://console.cloud.google.com/billing/budgets

What to Send Your Web Developer

Once setup is complete, please provide:

  • ✅ Your Google Maps API key
  • ✅ Confirmation billing is enabled
  • ✅ A list of approved website domains (live and staging)

Why This Is Required

Google requires this setup to:

  • Protect your account from unauthorised usage
  • Ensure billing transparency
  • Allow interactive maps to function correctly

This is a standard Google requirement and applies to all modern websites using Google Maps.

Need Help?

If you’re unsure at any point, your web development team can guide you through the process or check your setup before the map is added to your website.

Was this article helpful?
Yes No

Need Support?

Can't find the answer you're looking for?
Contact Support