Skip to main content

Fix a blank, gray, watermarked, or non-loading Google Map

The plugin loads Google Maps only when Settings → Map → Map provider is Google and a browser key is saved. A dark map marked “for development purposes only” normally indicates a Google billing/key problem; an empty map region can also be a missing Layout Map widget or zero-height container.

Check the plugin configuration first​

  1. Open Store Locator → Settings → Map.
  2. Select Google Maps as Map provider.
  3. Put the website-restricted key in Google Maps API key (browser).
  4. Save and reload the public locator while logged out.
  5. Confirm the chosen Layout actually contains a Map widget with a non-zero height.

Do not put an IP-restricted server key into the browser field. The browser key is printed in the page source by design and must be protected with Website and API restrictions.

Required Google Cloud configuration​

For the public Map, enable billing and Maps JavaScript API in the same Google Cloud project as the key. Enable Places API when using Google address autocomplete. Enable Maps Static API if the admin map-theme picker should display preview thumbnails.

Under the browser key:

  • Application restriction: Websites;
  • add the exact production and staging origins, including https://;
  • include wildcard subdomains only when needed;
  • API restrictions: permit the APIs actually used above.

Google's current error reference is Maps JavaScript API error messages, and its restriction guidance is Google Maps Platform security guidance.

Read the actual error​

Open browser DevTools → Console, reload, and copy the first Google Maps error code. Do not diagnose from the final cascade of warnings. Then use Google API-key errors shown by the locator.

If there is no Google error​

Inspect DevTools → Network for maps.googleapis.com/maps/api/js. A blocked request points to Content Security Policy, consent tooling, an optimizer, DNS/firewall, or browser extension. A successful script plus a zero-height .cliq-sl-map points to Layout sizing. A working Leaflet map does not prove the Google key is configured because Leaflet does not use it.