Google Maps keys (browser key and server key)

Help Center › API keys & connections › Google Maps keys (browser key and server key)

Google Maps keys (browser key and server key)

Which Google Maps keys VisionScaper can use, which Google APIs to enable, and how to restrict each key.

VisionScaper has two Google key boxes. Both are optional. Without them, address autocomplete uses OpenStreetMap and the Route planner estimates miles.

Before you start

  • You need a Google Cloud account with billing set up. Check Google’s current pricing and free allowances yourself.
  • You need WordPress admin access.

Steps

A. The main key (called “Google Maps API key (optional)”)

  1. In Google Cloud, create a project and an API key. Follow Google’s current instructions.
  2. Enable Places API (New). This powers Google address autocomplete.
  3. Enable Maps JavaScript API. This powers Explore in 3D.
  4. Restrict the key to your website’s address (an HTTP referrer restriction), as the screen advises.
  5. In WordPress, open Settings → VisionScaper.
  6. Paste the key into Google Maps API key (optional) and press Save Changes.

B. The server key (called “Google server key for the Route planner (optional)”)

  1. Create a second key in Google Cloud.
  2. Enable Routes API (driving distances) and Places API (New) (nearby restaurants and gas prices).
  3. Restrict this key to your server’s IP address. Your web host can tell you the address.
  4. Paste it into Google server key for the Route planner (optional) and save.

If the server key box is empty, VisionScaper uses the main key for these server lookups.

What each key does in VisionScaper

Feature Key used
Address autocomplete Main key (falls back to OpenStreetMap)
Street address from a map point Main key (falls back to OpenStreetMap)
Explore in 3D Main key, loaded in the browser
Route planner driving distances Server key, then main key

Tips

  • Use two keys so the browser key can be locked to your domain and the server key to your IP.
  • Server-side address lookups send your site address as the referrer, so a domain-restricted main key can still work. (The restriction behaviour with Google was not verified.)
  • Set a budget alert in Google Cloud so a bad day cannot surprise you.
  • Never put the server key in a web page.

If something goes wrong

  • Autocomplete falls back to OpenStreetMap: the key is empty, the API is not enabled, or the restriction blocks your site.
  • “Explore in 3D” does not show: see Explore in 3D.
  • Route distances look like straight-line guesses: add the server key, or set an OSRM address (see OSRM routing URL).

Related articles

Still need help?

Tell us what you were trying to do and a person will reply.

Contact support