_1@2x.png)
Set Up Google Maps in GravityView Maps
GravityView Maps uses Google Maps to display entries on a map and convert addresses into longitude and latitude values using geocoding. To enable this functionality, you’ll need to create and configure Google Maps API keys through Google Cloud.
1. Create Two Google Maps API Keys
You will need two separate keys:
Frontend API Key (restricted)
Used to load and display the map to site visitors. This key is exposed in the browser.
Backend API Key (unrestricted)
Used for geocoding (converting entry addresses into map markers and address autocomplete). This key is stored securely on your server and never shown to users.
To create your keys, follow the instructions on Google's Get API Key page or watch the video from Google below:
2. Configure Each API Key in Google Cloud Console
Frontend Key (Restricted)
| Application restrictions | Leave this key unrestricted during setup. If you choose to restrict it later, use IP address restrictions only. Other restriction types may prevent maps from loading. |
| API restrictions: | Restrict to: Maps JavaScript API |
Backend Key (Unrestricted)
| Application restrictions: | Leave as None (only used server-side and never exposed) |
| API restrictions: | Restrict to: Maps JavaScript API Geocoding API Places API (if using autocomplete) |
3. Add Your Keys to GravityView Maps Settings
In your WordPress dashboard:
- Go to GravityKit → Settings
- Click GravityView Maps → Google Maps
- Paste your restricted frontend key into the Google Maps API Key field
- Enable “Use Unrestricted Key for Geocoding”
- Paste your backend key into the Unrestricted Google Maps API Key field
- Click Save Settings
4. Verifying Key Access
Use the Check Key button next to each field in the GravityView Maps settings to confirm:
- Mapping: API key has access to Maps JavaScript API
- Geocoding: API key has access to Geocoding API
- Places: API key has access to Places API (if needed)
Note that the frontend key only require the Mapping API
(The Geocoding and Places keys will only be used if you don't configure an unrestricted key)
The backend key will do geocoding and autocomplete on the server side and won't be exposed.
5. Troubleshooting
If you receive the error:
“This page didn’t load Google Maps correctly”
…it likely means your site is loading Google Maps more than once (possibly from your theme or another plugin).
Please check this article for more details: