Last updated:

May 23, 2026

My Google Map is not Loading / is Gray

If your Google Maps background is gray or not loading, the cause is almost always a misconfigured Google Maps API key or your live domain not being added to the Website Restrictions in Google Cloud Console. Make sure the Maps JavaScript API is enabled and your live domain is whitelisted. Watch the Loom tutorial for a full walkthrough.

A gray background where your Google Map should be almost always means one of two things: the Maps JavaScript API isn’t enabled for your Google Cloud project, or your live domain isn’t listed in the API key’s Website Restrictions. Both are required for Google Maps to load on a published Webflow site. The issue won’t appear on your Webflow.io staging domain by default, which is why it can catch you off guard after publishing.

This is the single most common issue with the Google Maps provider, and it is straightforward to resolve in Google Cloud Console.

Fix Google Maps API Settings

Make sure your Google Cloud Console API key is set up correctly:

  • The Maps JavaScript API is enabled for your project.
  • Your live domain is added to the Website Restrictions in your API key settings.

You can manage your API key settings here: Google Cloud Console API Credentials

Watch the step-by-step video tutorial: Loom: Set up Google Maps API Key

💡 If you’d prefer to avoid API key setup entirely, consider switching to MapLibre or Open Street Map. Both are free with no API key required.

Practical Tips

  • Your staging domain works but your live domain doesn’t. Google Maps uses your API key’s Website Restrictions to decide where to load. Your Webflow.io staging URL as well as the live domain must be explicitly listed, for example yourdomain.com/*. Add it, then test on your live site after a hard refresh or in an incognito window.
  • ‘For development purposes only’ watermark means billing isn’t enabled. If you see a watermark across the map rather than a fully gray screen, your API key is valid but your Google Cloud billing account isn’t activated. Google Maps requires billing to be enabled even within the free tier. Enable it in Google Cloud Console and the watermark disappears.
  • Changes to API key settings take a few minutes to propagate. After adding your domain to Website Restrictions or enabling billing, wait 2–5 minutes before testing. If the map is still gray, do a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or test in an incognito window to rule out caching.