Before reading this help file you may want to check this video. It explains how to create API Key for Google maps and how to set it on theme.
Watch Video on Youtube
Why Do You Need an API Key?
Google Maps requires you to add your own API key before it can be used on your website. Since June 2018, Google requires a billing account to be set up, but you get $200/month of free usage, which is enough for most websites.
🔗 More details on pricing:
- The free limits are explained here https://developers.google.com/maps/billing-and-pricing/overview
- Set limits and add alerts https://developers.google.com/maps/billing-and-pricing/manage-costs
How to Get a Google Maps API Key
Step 1: Log in to Google Cloud Console
- Go to Google Cloud Console and sign in with your Gmail account.
Step 2: Set Up Your Billing Account
- Google requires a billing account, even if you stay within the free $200/month limit.
- Add your billing details in the Google Cloud Billing section.
Step 3: Create a New Project & Enable APIs
Create a new project in Google Cloud Console.
Go to Library API and enable the following 5 APIs:
- Maps JavaScript API
- Places API
- Geocoding API
- Geolocation API
- Street View Static API
Step 4: Get Your API Key
- Select “GET A KEY” in the Google Cloud Console.
- Click “Create API” to generate your key.
Step 5: Restrict Your API Key (Important for Security)
To prevent unauthorized use, restrict your key:
- Use wildcard domains (e.g., *.yourdomain.com) so it works on all pages of your site.
- If you only enter yourdomain.com, the key will work only on the homepage (yourdomain.com).
Use wildcard domains:
Step 6: Add API Key to Theme Options
- Copy your API Key.
- Go to Theme Options → Map → Map Settings.
- Paste the API key and save changes.
Paste the key in Theme Options > Map Configuration > Map General Settings > Google Maps API Key
- Make sure you select Google Maps for Map System
- Make sure you select Google Places for Places API
How to Check if Your API Key is Correct
If Google Maps does not load, check for errors:
- Open your site in Chrome.
- Right-click → Inspect → Console to see if there are any Google Maps error messages.
- If needed, go to your Google Cloud Console and verify that your API key is properly set up and restricted.