Summarize this article with:
Your contact page looks broken. A gray box sits where your Google Map should be, displaying that frustrating message: “this page can’t load Google Maps correctly.”
Visitors can’t find your location. Trust drops instantly.
This error started appearing after Google changed their Maps JavaScript API requirements in 2018. Every embedded map now needs a valid API key and active billing account in Google Cloud Console.
Good news: fixing it takes about 15 minutes.
This guide walks you through identifying the exact error in your browser console, creating or fixing your Google Cloud credentials, and getting your interactive map back online.
No coding experience required.
How to Fix “This Page Can’t Load Google Maps Correctly”
“This page can’t load Google Maps correctly” is a browser error that appears when your website fails to display an embedded Google Map.
The problem traces back to June 11, 2018, when Google started requiring an API key and billing account for all Maps JavaScript API requests.
Website owners see this error for several reasons: missing API credentials, expired billing information, incorrect domain restrictions, or plugin conflicts loading multiple keys.
This guide covers 7 diagnostic and repair steps.
Have you seen the latest WordPress statistics?
Discover the latest WordPress statistics: market share, security trends, performance data, and revenue insights that shape the web.
Check Them Out →Time required: 15-30 minutes.
Skill level: Beginner to intermediate.
Prerequisites
Gather these before starting:
- Google account with admin access
- Access to your website backend (WordPress dashboard, cPanel, or CMS)
- Google Cloud Console account (free to create)
- Browser with developer tools (Chrome, Firefox, or Edge)
- Credit card for billing verification (no charge for sites under 28,000 monthly loads)
- Your website URL where the map should display
- Current API key if one exists
You will also need 15-30 minutes of uninterrupted time to complete all steps.
Step One: How Do You Access the JavaScript Console to Identify the Error Type?
The JavaScript console reveals the exact cause of your map display error.
Open it to find specific error codes like MissingKeyMapError, InvalidKeyMapError, or RefererNotAllowedMapError.
Opening Developer Tools
Press F12 on Windows or Cmd+Option+I on Mac.
Click the “Console” tab in the panel that appears.
Identifying Common Error Messages
Look for red text containing “Google Maps” or “API”.
The five most common errors you will see:
- MissingKeyMapError: No API key exists in your code
- InvalidKeyMapError: Wrong key or billing not enabled
- ApiNotActivatedMapError: Maps JavaScript API not turned on
- RefererNotAllowedMapError: Domain restrictions blocking your site
- OverQuotaMapError: Usage limits exceeded
Recording the Error
Copy the full error message text.
You will need this information for troubleshooting in later steps.
Step Two: Where Do You Find Your Existing Google Maps API Key?
Your current API key lives in the Google Cloud Console under your project credentials.
Finding it takes about 2 minutes.
Accessing Google Cloud Console
Go to console.cloud.google.com and sign in with your Google account.
Select your project from the dropdown at the top of the page.
Locating API Credentials
Navigate to APIs & Services, then click Credentials in the left sidebar.
Your API keys appear in a list showing name, creation date, and restrictions.
Checking Key Status
Click the key name to view its current settings.
Note whether restrictions are set to “None,” “HTTP referrers,” or “IP addresses” since this affects how the key works on your website.
Step Three: How Do You Create a New Google Maps API Key in Google Cloud Console?
Creating a fresh API key takes about 5 minutes and solves most map loading problems.
This process works for new projects or when your existing key has issues.
Starting a New Project
Click the project dropdown, then select “New Project” in the upper right.
Name it something recognizable like “Website Maps” and click Create.
Generating the API Key
Go to APIs & Services, then Credentials, then click Create Credentials.
Select “API key” from the dropdown menu.
Your new key appears in a popup window.
Copying Your Key
Click the copy icon next to the key string.
Store this somewhere safe since you will need it for your website configuration and cannot retrieve it later without regenerating.
Initial Security Setup
Click “Restrict Key” immediately after creation.
You will configure full restrictions in Step Six, but setting basic limits now prevents unauthorized usage.
Step Four: How Do You Enable Required APIs for Google Maps JavaScript?
Your API key works only when the Maps JavaScript API is enabled in your Google Cloud project.
Most map loading errors happen because this step gets skipped.
Accessing the API Library
In Google Cloud Console, go to APIs & Services, then click Library.
Search for “Maps JavaScript API” in the search bar.
Enabling Maps JavaScript API
Click the Maps JavaScript API card, then click the blue Enable button.
Wait 2-3 minutes for activation to propagate.
Additional APIs to Enable
Enable these if your map uses extra features:
- Places API: Location search and autocomplete
- Geocoding API: Address to coordinates conversion
- Directions API: Route calculations
- Maps Embed API: Simple iframe embeds
Step Five: How Do You Set Up Billing in Google Cloud Platform?
Google requires an active billing account even for free-tier usage.
Sites under 28,000 monthly map loads pay nothing, but billing must be enabled.
Creating a Billing Account
Navigate to Billing in the left menu, then click “Link a billing account.”
Select “Create billing account” if you don’t have one.
Adding Payment Information
Enter your credit card details and billing address.
Google provides $200 monthly credit for Maps Platform usage, covering most small business websites.
Linking to Your Project
Return to your project settings and confirm billing is linked.
The billing status shows “Active” when properly configured.
Step Six: How Do You Configure API Key Restrictions for Your Domain?
Unrestricted API keys get abused, resulting in unexpected charges or quota exhaustion.
Setting HTTP referrer restrictions limits key usage to your domain only.
Setting Application Restrictions
Go to Credentials, click your API key name, then select “HTTP referrers” under Application restrictions.
Adding Your Domain
Add these patterns in the Website restrictions field:
https://yourdomain.com/https://www.yourdomain.com/https://.yourdomain.com/(for subdomains)
Setting API Restrictions
Under API restrictions, select “Restrict key” and check only the APIs you enabled.
Click Save and wait 5 minutes for changes to take effect.
Step Seven: How Do You Add the API Key to Your Website?
The final step connects your configured API key to your website code.
Location depends on whether you use WordPress, raw HTML, or a page builder theme.
WordPress Websites
Most WordPress map plugins have a dedicated API key field in their settings.
Common locations:
- WP Go Maps: Maps > Settings > Advanced > API Key
- Google Maps Widget: Settings > Google Maps Widget
- Toolset Maps: Toolset > Settings > Maps
Paste your key and save changes.
HTML Websites
Find the Google Maps script tag in your page source.
Replace YOURAPIKEY with your actual key:
<script src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY"></script>
Theme Settings (Avada, Divi, Elementor)
Premium themes store the API key in theme options:
- Avada: Avada > Theme Options > Contact Form > Google Map
- Divi: Divi > Theme Options > Integration > API Keys
- Elementor: Elementor > Settings > Integrations
Verification
Confirm your fix works before moving on.
Testing Map Display
Clear your browser cache completely, then reload the page with your map.
The “For development purposes only” watermark and error popup should disappear.
Checking Console for Errors
Open developer tools again and verify no Google Maps errors appear in red.
Green or no messages means success.
Verifying API Usage
Return to Google Cloud Console, go to APIs & Services > Dashboard.
Your Maps JavaScript API should show recent requests confirming the connection works.
Troubleshooting
Map Still Shows “For Development Purposes Only” Watermark
Cause: Billing not properly linked to project.
Fix: Go to Billing, verify payment method is valid, confirm project is linked to billing account.
Console Displays “RefererNotAllowedMapError”
Cause: Domain restrictions don’t match your website URL.
Fix: Add both www and non-www versions of your domain with wildcards to the HTTP referrer list.
Error “API Keys With Referer Restrictions Cannot Be Used With This API”
Cause: Some APIs require IP restrictions instead of HTTP referrer restrictions.
Fix: Create a separate key with IP restrictions for server-side APIs like Geocoding.
Map Appears Gray or Blank With No Error Popup
Cause: CSS conflicts hiding the map container or zero height/width values.
Fix: Inspect the map element and ensure it has defined dimensions, check for display: none rules.
Multiple Plugins Loading Different API Keys
Cause: Two or more plugins each loading their own Maps script with different keys.
Fix: Use the same API key in all plugin settings, or disable duplicate map plugins you don’t need.
Related Processes
- How to embed Google Maps without an API key using iframe method
- How to monitor Google Maps API usage and costs in Cloud Console
- How to migrate from deprecated Google Maps API v2 to v3
- How to add multiple map markers with custom pins
- How to switch from Google Maps to OpenStreetMap or Mapbox alternatives
FAQ on This Page Can’t Load Google Maps Correctly
Why Does My Website Show “This Page Can’t Load Google Maps Correctly”?
Google requires a valid API key and active billing account for all Maps JavaScript API requests since June 2018.
This error appears when credentials are missing, invalid, or improperly configured in Google Cloud Console.
How Do I Fix the Google Maps Error on WordPress?
Locate your map plugin settings and paste a valid Google Maps API key.
Common plugins like WP Go Maps, Elementor, and Avada store the key in their settings panel under API or integration options.
Do I Need to Pay for Google Maps on My Website?
Most small websites pay nothing.
Google provides $200 monthly credit covering approximately 28,000 map loads. You must add a credit card for billing verification, but charges only apply if you exceed the free tier.
What Is a Google Maps API Key?
An API key is a unique credential string that authenticates your website’s requests to Google Maps Platform servers.
It tracks usage, applies billing, and prevents unauthorized access to your map quota.
Why Is My Google Map Showing “For Development Purposes Only”?
This watermark appears when billing is not enabled on your Google Cloud project.
Link an active billing account with valid payment information to remove the watermark and error message.
How Do I Find My Existing Google Maps API Key?
Sign into Google Cloud Console, select your project, then navigate to APIs & Services followed by Credentials.
Your API keys appear in a list with their names, creation dates, and restriction settings.
What APIs Do I Need to Enable for Google Maps?
Enable Maps JavaScript API at minimum.
Add Places API for location search, Geocoding API for address conversion, and Directions API for route calculations depending on your map features.
How Long Does It Take to Fix This Error?
Most fixes take 15-30 minutes.
Creating a new API key and enabling billing requires about 10 minutes. Allow 5 additional minutes for changes to propagate through Google’s servers.
Can I Use Google Maps Without an API Key?
Only through simple iframe embeds using Maps Embed API.
Copy the embed code directly from Google Maps share feature. Interactive maps with custom markers or Ajax functionality require a proper API key.
Why Did My Google Map Suddenly Stop Working?
Common causes include expired payment method, exceeded usage quota, or changed domain restrictions.
Check your Google Cloud Console for billing alerts and verify your API key restrictions match your current website URL.
Conclusion
The “this page can’t load Google Maps correctly” error comes down to one thing: Google Cloud Platform billing and API configuration.
Fix the credentials, fix the map.
You now know how to check your browser console for specific error codes, create API keys with proper domain restrictions, and enable billing verification without getting charged.
Most issues resolve within 15 minutes.
Clear your browser cache after making changes. Wait 5 minutes for Google’s servers to propagate your new settings.
If errors persist, revisit your HTTP referrer restrictions and confirm your authorized domains match exactly.
Bookmark this guide. Map errors happen again when payment methods expire or usage limits get exceeded.
Your visitors deserve a working contact page.
