Get maps working with a Google Maps API key

  • troubleshooting
  • maps
  • google-maps
  • locations

Google Maps on a Dirigible site need a Google Maps API key. Without one, or without billing turned on, the map stays blank. Once the key is in, add maps to your pages with Add locations and a store locator map.

OpenStreetMap maps work without a Google key. This guide is for when Map Provider is set to Google Maps.

Create a Google Maps API key

  1. Sign in to the Google Cloud Console and create or select a project.
  2. Open APIs & Services → Library.
  3. Enable Maps JavaScript API and Geocoding API.
  4. Open APIs & Services → Credentials.
  5. Click Create credentials → API key.
  6. Copy the key, then open it and add restrictions:
    • Under application restrictions, choose HTTP referrers and add your site, for example https://yourdomain.com/* and https://www.yourdomain.com/*.
    • Under API restrictions, allow only Maps JavaScript API and Geocoding API.
  7. Make sure the project has a billing account. Maps stay blank without billing, even with a valid key.

Google renames console buttons from time to time. If a label doesn't match, look for Library, Credentials, and API key.

Always restrict the key to your domain. Anyone can copy a map key from your site's pages, and an unrestricted key can run up charges on your account.

Add the key to your site

  1. Go to Appearance → Customize → Dirigible Locations.
  2. Turn on Enable Mapping.
  3. Set Map Provider to Google Maps.
  4. Paste the key into Google Maps API Key.
  5. Click Publish.

Check a page with a map in a private window. See See your latest edits (clear your browser cache).

If the GDPR Banner is on, maps can wait until the visitor accepts cookies. Write the message they see in GDPR Map Prompt, on the same Mapping panel.

Stadia and Stamen map styles use the separate Stadia API Key field, not the Google key.