Google Maps API Key Restriction Verification Guide

✅ What You Should Have Set Up

Based on best practices, here’s what your restrictions should look like:

1. Application Restrictions

Type: HTTP referrers (web sites)

Referrers to add:

www.denverpsychologyandwellness.com/*
denverpsychologyandwellness.com/*

⚠️ Make sure you include the /* at the end!

2. API Restrictions

Type: Restrict key
Select ONLY: Maps JavaScript API

🧪 How to Test Your Restrictions

Test 1: Check if your map still works

Visit your contact page: https://www.denverpsychologyandwellness.com/contact
The map should load and display correctly
If you see a grey box or “For development purposes only” watermark → restrictions are TOO strict

Expected Result: ✅ Map loads normally

Test 2: Check browser console for errors

Visit your contact page
Right-click anywhere on the page → “Inspect” or press F12
Click the “Console” tab
Look for any red errors mentioning “API key” or “Google Maps”

Expected Result: ✅ No API key errors

Common error messages if restrictions are wrong:

❌ “This API key is not authorized to use this service or API”
❌ “RefererNotAllowedMapError”
❌ “ApiTargetBlockedMapError”

Test 3: Verify in Google Cloud Console

Go to: https://console.cloud.google.com/google/maps-apis/credentials
Click on your API key name
Verify these settings:

Application restrictions:

Should say: “HTTP referrers (web sites)”
Should list your domains with /*

API restrictions:

Should say: “Restrict key”
Should show ONLY “Maps JavaScript API” in the list

⏱️ IMPORTANT: Wait Time

Restrictions can take up to 5 minutes to take effect!

If your map isn’t working immediately after adding restrictions:

Wait 5 minutes
Clear your browser cache (Ctrl+Shift+Delete)
Try again

🔒 Security Check: Test if Key is Actually Restricted

To verify your key is truly secure, you can try this test:

Create a simple HTML file on your desktop with this code: ```html <!DOCTYPE html>

Test

```

Open this file in your browser (it will have a file:// URL)
Expected Result: ❌ Map should NOT work (you should see errors in console)
Why: This proves your key is restricted and can’t be used from unauthorized domains

✅ Success Indicators

Your restrictions are working correctly if:

✅ Map loads on www.denverpsychologyandwellness.com/contact
✅ No console errors about API keys
❌ Map does NOT work when tested from a local HTML file or different domain
✅ Google Cloud Console shows your restrictions properly set

🚨 Troubleshooting

Problem: Map shows “For development purposes only”

Solution:

Check billing is enabled in Google Cloud Console
Verify your API key is correctly added to the project

Problem: Map is grey/not loading

Solutions to try:

Wait 5 minutes (restrictions take time)
Check referrer format includes /*
Verify you’re using HTTPS (not HTTP)
Make sure “Maps JavaScript API” is enabled AND selected in restrictions

Problem: “RefererNotAllowedMapError”

Solution: Your referrer format is wrong. Should be:

✅ denverpsychologyandwellness.com/*
❌ NOT denverpsychologyandwellness.com
❌ NOT *.denverpsychologyandwellness.com

📊 What Did We Accomplish?

Before: Anyone with your API key could use it anywhere, potentially costing you money

After: Your API key can ONLY be used on denverpsychologyandwellness.com and ONLY for Maps JavaScript API

This prevents:

❌ Unauthorized use on other websites
❌ Excessive quota consumption
❌ Unexpected Google Maps billing charges
❌ Key abuse for other Google services

📝 Next Steps

✅ Test your contact page map
✅ Check browser console for errors
✅ Verify restrictions in Google Cloud Console
✅ (Optional) Test that key doesn’t work elsewhere

Once you confirm everything is working, you’re all set! 🎉