How to Create a New Google Maps API Key (with Billing & Security)

This guide will help you generate a brand-new API key for embedding or using Google Maps on your website.

Step 1: Log into Google Cloud Console

Go to: https://console.cloud.google.com

Log in with your Google account.

Step 2: Create or Select a Project

• Click the project selector at the top
• Choose an existing project or click “New Project”
• Name it something like: Maps API for [Your Website Name]
• Click Create

Step 3: Enable Billing

If you haven’t already:

• Go to Billing in the left-hand menu
• Set up a billing account or attach an existing one
• Google Maps API includes $200/month free usage, which covers most small websites but you will still need to attach a credit card to the account

Step 4: Enable Required APIs

Go to APIs & Services > Library
Search for and enable each of the following:

1.  Maps JavaScript API
2.  Geocoding API (if using address lookups)
3.  Places API (optional, for autocomplete/address search)
4. Click Enable for each.

 Step 5: Create a New API Key

1. Go to APIs & Services > Credentials
2. Click + Create Credentials > API Key
3. A key will be generated – copy and save it
   

 Step 6: Secure Your API Key

1. Click the pencil icon next to your new key and:
2. Under Application Restrictions, select: HTTP referrers (websites)
3. Add your domain(s)
4. Click Save.

https://yourdomain.com/*
https://www.yourdomain.com/*

*.yourdomain.com/*

You can also add sub domains or staging domains (like https://staging.yourdomain.com/*) if needed.

 Step 7: Add the Key to Your Website

Paste the key into your website’s map embed script, plugin, or settings. Example for raw HTML:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Replace YOUR_API_KEY with the actual key.

Breakdance Builder

1. In your WordPress dashboard, go to
   Breakdance > Settings > Integrations
2. Click the Google Maps tab
3. Paste your API key into the “Google Maps API Key” field
4. Click Save Settings
5. To add a map, use the Map element in the Breakdance editor and configure the address or coordinates

Elementor (Free or Pro)

For Elementor Pro (uses built-in Google Maps widget):

1. Go to
   Elementor > Settings > Integrations
2. Scroll to Google Maps
3. Paste your API key into the field provided
4. Click Save Changes
5. In the Elementor editor, drag the Google Maps widget to your page and set your desired location

For Elementor Free (uses HTML widget or plugin):

1. Use an HTML widget and paste in the map embed code:
2. (Optional) Use a plugin like WP Google Maps for better customisation if you’re not using Pro.

Divi Theme / Builder

1. In your WordPress admin area, go to
   Divi > Theme Options
2. Scroll to the General tab
3. Find the field labeled Google API Key
4. Paste your key and click Save Changes
5. In the Divi Builder, use the Map module
6. Add Map Pins/Markers and set addresses as needed

Tip: Divi may require both the Maps JavaScript API and Geocoding API to be enabled for full functionality (especially for address lookups).

Common Issues to Watch Out For

• Maps not loading? Use Developer Console to check for errors like:
  • RefererNotAllowedMapError
  • ApiNotActivatedMapError
  • InvalidKeyMapError
• Always make sure:
  • API key is correctly entered
  • Correct APIs are enabled in Google Cloud
  • Domain is authorised under HTTP referrers in API key settings
  • Billing is enabled and active

How to Open the Developer Console

On Chrome, Edge, or Brave (most browsers):

1. Right-click anywhere on your webpage
2. Click “Inspect”
3. Click the “Console” tab at the top

Or use the shortcut:
Windows/Linux: Ctrl + Shift + J
Mac: Cmd + Option + J

Copy or Screenshot the Error

If you’re not sure how to fix the error, take a screenshot or copy the full error message and share it with your developer or support contact.

 Final Tips

• Once you update your API key settings or billing, clear your browser cache or use Incognito mode to check again.
• Test the map on different devices and browsers
• Monitor usage via APIs & Services > Dashboard