Configure Google Maps and API keys
Use this setup when you want Google Maps on the public locator, Google Places address autocomplete, or Google server-side geocoding for imports and missing coordinates.
Cliq Store Locator has two Google key fields because the public map and server-side geocoding run in different environments:
| Plugin field | Used for | Recommended restriction |
|---|---|---|
| Google Maps API key (browser) | Public map and Places autocomplete | Website/HTTP referrers |
| Google server key (geocoding) | CSV imports and Fill missing coordinates | Server IP address |
Do not paste a server-restricted key into the browser field. The map will be unable to use it correctly, and loosening the server key enough to work in a browser exposes more access than necessary.
1. Prepare the Google Cloud project
In Google Cloud Console, select or create the project that will own your maps usage. Attach billing if Google requires it for the APIs you enable.
Enable the APIs needed by your configuration:
- Maps JavaScript API for the public Google map;
- Places API for address autocomplete;
- Geocoding API for server-side address-to-coordinate lookup.
Create one browser key and one server key. Restrict each key to the APIs it actually uses.
2. Restrict the browser key
Set the browser key's application restriction to websites/HTTP referrers. Add every hostname that displays the locator, including production and staging.
For example:
https://example.com/*
https://staging.example.com/*
Local domains must also be allowed while testing. Do not use * as the permanent production restriction.
3. Restrict the server key
Set the server key's application restriction to your web server's public outbound IP address, then restrict it to the Geocoding API. Ask your host for the correct outbound IP when the site uses a proxy or managed platform.
4. Add the keys in WordPress
- Go to Store Locator → Settings.
- Open the Map tab.
- Set Map provider to Google Maps.
- Paste the browser key into Google Maps API key (browser).
- Paste the server key into Google server key (geocoding).
- Set Geocoder to Google if Google should geocode stores.
- Select Save settings.
5. Verify both keys independently
Open a published locator while logged out. The Google map should render without a development watermark or console error. Then edit a test store, change its address, and use the location lookup. Finally, go to Store Locator → Tools and run Fill missing coordinates on a test record without coordinates.
If the map works but server geocoding fails, the browser key is probably correct and the server key, Geocoding API, billing, quota, or IP restriction needs attention.
Common errors
- RefererNotAllowedMapError: add the exact site origin to the browser key's referrers.
- ApiNotActivatedMapError: enable the API named in the browser console.
- REQUEST_DENIED during geocoding: check the server key, Geocoding API, billing, and outbound-IP restriction.
- Map is blank only after optimization: temporarily exclude the Google Maps script from delay/defer combination and test again.
After the setup works, configure the site-level Map settings and Layout overrides.