Settings and design

Map settings

Choose Google Maps or Mapbox, add your API key, and set the area customers see when they first open your store locator.

2 min readUpdated
settingsmapgoogle mapsmapboxapi keydefault viewportzoom

The Map tab in Settings controls which map your store locator uses and where it starts.

The Map tab in Settings, with the Google and Mapbox choice, the Google Maps API key field, Find API key and How to get a key links, and the Default viewport with zoom, latitude, longitude, and a map with a marker

Do you need a map key?

No. Without a key, your store locator uses a free map, and customers can still:

  • See your stores on the map.
  • Search by store name, suburb, or postcode.
  • Use Use my current location (or your own button text) to find stores near them.

Add a Google Maps or Mapbox key if you want:

  • Address suggestions as customers type, so they can search from any street address.
  • Google Maps or Mapbox map styles instead of the free map.

Until a key is saved, a banner at the top of Settings reminds you that address search is off.

Add a Google Maps key

  1. Go to Settings › Map.
  2. Choose Google.
  3. Click How to get a key for a step-by-step guide with short videos. In short:
    1. Create a project in Google Cloud and turn on billing. Google Maps Platform includes free monthly usage.
    2. Turn on three APIs: Maps JavaScript API (shows the map), Places API (address suggestions), and Geocoding API (places stores on the map).
    3. On the Credentials page, click Create credentials › API key, and copy the key.
  4. Paste the key into Google Maps API key.
  5. Click Save.

We recommend you restrict the key to your store’s domain in Google Cloud, so no one else can use it. The How to get a key guide links to Google’s instructions.

Add a Mapbox token

  1. Go to Settings › Map.
  2. Choose Mapbox.
  3. Click Find API key to open your Mapbox access tokens, and copy a token.
  4. Paste it into Mapbox access token.
  5. Click Save.

You can use Google or Mapbox, not both. Switching from one to the other clears the key you had before.

Set the default viewport

The default viewport is what customers see when they first open the map, before they search.

  1. Under Default viewport, drag the marker on the map to the centre you want, such as the middle of the area your stores cover. Default latitude and Default longitude update as you drag.
  2. Set Default zoom, from 1 (the whole world) to 20 (street level). For one city, try 10 to 12. For a whole country, try 4 to 6.
  3. Click Save.

Tips

  • After you add a key, open your store locator and type part of an address to check suggestions appear.
  • If the map or search stops working after you add a Google key, check the three APIs are turned on and billing is set up in Google Cloud.
  • Treat your Google key like a password: keep it restricted to your domain.

Last updated