Google Maps requires an API key to work on your website. This guide shows you how to set up your own key so you control costs and avoid relying on a developer’s shared account.
Quick Setup (For Power Users)
Time Required: 15–30 minutes
Cost: Free for most websites ($200/month Google Cloud credit)
- Create Account → Google Cloud Console, sign in, accept terms
- New Project → Project dropdown → New Project → Name → Create
- Enable Billing → Billing → Create/Link account → Add payment method (covered by free credits)
- Enable APIs → Enable:
- Maps JavaScript API
- Geocoding API
- Places API
- (Optional) Directions, Distance Matrix, Static Maps
- Create Key → APIs & Services → Credentials → + Create Credentials → API Key
- Secure Key → Restrict to enabled APIs + your domains (
yourwebsite.com/*,*.yourwebsite.com/*) - Add to WordPress → Paste key in theme/plugin setting (Elementor, WP Google Maps, etc.) or send to developer
- Test Maps → Load a map page and check for errors
- Monitor Usage → Set $50 budget alert → Review Dashboard & Quotas
Quick Reference
- API Key:
[Paste here after Step 5] - Project Name:
[Your project name] - Website Domain:
[yourwebsite.com]
Full Walk-Through (For Beginners)
Step 1: Create a Google Cloud Account
- Go to Google Cloud Console
- Sign in with a Google account (or create one)
- Accept the terms of service
Step 2: Create a New Project
- Click the project dropdown at the top
- Select New Project
- Name it (e.g., “Website Maps”)
- Click Create and wait for setup
- Make sure your new project is selected
Step 3: Enable Billing
Important: Billing must be enabled, but Google provides $200/month in free credits. Most small websites will never exceed this.
- Click Billing in the sidebar
- Create or link a billing account
- Add a payment method
- You won’t be charged unless usage exceeds $200
Step 4: Enable Required APIs
In APIs & Services → Library, enable:
- Maps JavaScript API (required)
- Geocoding API (address lookup)
- Places API (search/autocomplete)
- (Optional) Directions, Distance Matrix, or Static Maps if your site uses them
Tip: Only enable the APIs you actually need. Extra APIs can create unnecessary usage and costs.
Step 5: Create Your API Key
- Go to APIs & Services → Credentials
- Click + Create Credentials → API Key
- Copy the generated key
- Click Restrict Key for security
Step 6: Secure Your API Key
- API restrictions: Select only the APIs you enabled
- Website restrictions: Add allowed referrers:
yourwebsite.com/**.yourwebsite.com/*
- Save
Best Practice: Restrict your key so it only works on your domain. Never leave it unrestricted.
Step 7: Add API Key to WordPress
- If DIY: Paste the key in your theme/plugin (Elementor, WP Google Maps, ACF, etc.)
- If working with a developer: Send them the key and your domain
Step 8: Test Your Maps
- Visit a page with a map
- Confirm it loads correctly
- If errors appear, check billing, API restrictions, and enabled APIs
Security Notes
- Never post your API key publicly
- Restrict it to your own domain(s)
- Share it only with trusted developers
Monitoring Usage & Costs
Set Up Budget Alerts
- Go to Billing → Budgets & alerts
- Create a budget (e.g., $50)
- Add your email for alerts
- Get notified before you exceed free usage
Check Usage Anytime
- Go to APIs & Services → Dashboard
- Review Quotas for limits
- If usage exceeds $200/month, charges bill automatically and Google emails you an invoice
Troubleshooting
Error: “This page can’t load Google Maps correctly”
- Check that the Maps JavaScript API is enabled
- Verify API key and domain restrictions
Gray Map Area
- Often caused by missing Geocoding API or billing setup
- Can also happen if restrictions are too strict — loosen temporarily to test
What Happens Next
- Your maps now load from your Google Cloud account
- You’ll get monthly usage reports
- Any shared/developer keys can be removed
- You have full transparency and control over costs
