Setup Steps¶
1. Create Google Cloud Project¶
Go to Google Cloud Console
Click Select a project → New Project
Name it (e.g., "My Website") and click Create
2. Enable Maps JavaScript API¶
Go to APIs & Services → Library
Search for "Maps JavaScript API"
Click on it and press Enable
3. Create API Key¶
Go to APIs & Services → Credentials
Click Create Credentials → API key
Copy the API key immediately
4. Restrict API Key (Important!)¶
Click Edit API key (or the pencil icon next to your new key)
Under Application restrictions, select HTTP referrers
Add your website domains:
*.webfacemedia.dev/*
yourdomain.com/*
*.yourdomain.com/*Under API restrictions, select Restrict key
Choose Maps JavaScript API
Click Save
5. Provide to Developer¶
Send your developer the API key:
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=AIzaSy...Billing & Pricing¶
Google Maps requires a billing account, but includes $200/month free credit
Most small websites stay within the free tier
Set up billing at: Billing
Common Issues¶
Map Not Loading¶
Check:
• Maps JavaScript API is enabled
• API key is correctly added to environment variables
• Your domain is added to HTTP referrer restrictions
• Billing is enabled (even for free tier)