Google Maps API Key and Billing Setup

How to Create a Google Maps API Key and Enable Billing

To use Google Maps features on your website, you need a Google Maps API Key. Google requires an active billing account linked to your project before the map will load — even for basic usage.

Follow these steps to create a project, set up billing, and generate your API key.

 

---

 

Step 1: Create a Google Cloud Project

Everything in Google Maps Platform lives inside a “Project.”

1. Go to the Google Cloud Console and sign in with your Google account.
2. Click the Select a project dropdown at the top of the page.
3. Click New Project in the top right corner of the popup.
4. Give your project a recognizable name (e.g., “Website Maps”) and click Create.
5. Once created, confirm your new project is selected in the project dropdown at the top of the page.

---

 

Step 2: Enable and Update Billing (Required)

The most common reason maps fail to load is that no billing account is linked to the project, or the payment method has expired or been removed. Google requires at least one valid payment method on file.

To create or link a billing account

1. Click the Navigation Menu (three horizontal lines) in the top left corner.
2. Select Billing.
3. If you don’t have a billing account, click Manage Billing Accounts, then Create Account, and follow the prompts to add your payment method.
4. If you already have a billing account, click Link a billing account and select it from the dropdown to attach it to your project.

To update an existing payment method

1. Open the Navigation Menu (top left) and go to Billing.
2. Click Payment method.
3. Click Edit to update an existing card, or click Add payment method to add a new one.

 

---

 

Step 3: Enable the Required Maps APIs

You need to tell Google which map services your website will use.

1. Open the Navigation Menu (top left).
2. Go to APIs & Services > Library.
3. Search for and enable each of the following APIs:
   • Maps JavaScript API
   • Maps Embed API
   • Directions API
   • Geocoding API
   • Places API (new)
   • Routes API
4. Click the blue Enable button for each one.

 

---

 

Step 4: Generate Your API Key

1. Go to Navigation Menu > APIs & Services > Credentials.
2. Click + Create Credentials at the top of the page.
3. Select API key from the dropdown.
4. A dialog will appear showing your new API key. Copy this key and save it somewhere safe — you will need it in Step 6.
5. Click Close to continue to the restriction settings.

 

---

 

Step 5: Restrict Your API Key (Security Best Practice)

Restricting your key prevents unauthorized use and protects you from unexpected charges.

1. On the Credentials page, click the name of the API key you just created.
2. Under Application restrictions, select Websites.
3. Under Website restrictions, click Add.
4. Enter your website URL in this format to cover all pages: *.yourwebsite.com/*
   Replace “yourwebsite.com” with your actual domain. Add a second entry without the wildcard (yourwebsite.com/*) to cover the root domain as well.
5. Under API restrictions, select Restrict key.
6. Check the boxes for the APIs you enabled in Step 3: Enable the Required Maps APIs.
7. Click Save at the bottom of the page.

 

---

 

Step 6: Add Your API Key to WordPress

Once your key is created, you need to enter it in your WordPress site. Where you do this depends on which plugin or theme handles your Google Map:

• RentPress: Go to RentPress > Intergrations > Google Maps API and paste your key in the Google API Key field, then click Save Settings.
• WP MAPS PRO: Go to WP MAPS PRO > Settings and enter the key in the Google Maps API Key field, then click Save Settings.
• ACF (Advanced Custom Fields): Go to Settings > General inside ACF Pro and enter the key under the Google Maps section.
• A dedicated Maps plugin: Open the plugin’s settings page and look for an “API Key” field.
• Theme settings: Some themes include a Google Maps API Key field under Appearance > Theme Options or Customize or within WordPress Admin Sidebar.

After saving, reload the page on your website to confirm the map is loading correctly.

 

---

 

Troubleshooting Map Errors

If your map shows a “For development purposes only” watermark or appears greyed out, use your browser’s developer console to identify the exact error.

How to check the browser console

1. Right-click anywhere on the page where the map should appear and select Inspect (or Inspect Element).
2. Click the Console tab in the panel that opens.
3. Look for red error text related to Google Maps.

Common Errors and Fixes

• BillingNotEnabledMapError: A valid payment method is not linked to your project. Go back to Billing in the Cloud Console and verify your billing account is active and connected (see Step 2).
• InvalidKeyMapError: The API key entered in WordPress is incorrect or incomplete. Double-check that you copied the full key with no extra spaces.
• RefererNotAllowedMapError: Your website’s URL is not listed in the key’s Website restrictions. Go to Credentials, open your key, and confirm your domain is added correctly (see Step 5).
• Map is blank (no error): If your site uses a cookie consent plugin and the visitor has not accepted cookies, the map may not load. This is expected behavior, as Google Maps requires cookies to function.

Additional Resources

• Get Started with Google Maps Platform — Google’s official guide on creating a project, enabling APIs, and generating a key.
• Manage Cloud Billing Accounts — Detailed steps for creating, linking, and updating your billing and payment methods.
• API Security Best Practices — Google’s recommendations for restricting API keys to prevent unauthorized usage and unexpected charges.
• Google Maps Error Messages Reference — A full list of browser console errors and how to resolve them.