Skip to main content
Your customers can already choose their service point from a list. At checkout they can search it by postcode or service point name, and in the cart by postcode. With two keys from your own Google account, you can give them more: Both keys are optional, and you can add one without the other. Without them, everything still works with the list. Making the keys takes about 15 minutes in Google Cloud, and this page walks you through every click.
What you need

​
What it costs

Google gives you a free amount of use every month, and charges for use above it. The map counts each time a customer opens it. Address search counts each search and each time a customer moves the map. Google’s current prices are on Google Maps Platform pricing. In Google Cloud, you can set a budget alert, so Google emails you before a bill grows. A budget alert doesn’t stop the charges: to cap what address search can cost, also set a daily request limit (a quota) for the Geocoding API.

​
Step 1: Make a project in Google Cloud

1

Sign in to Google Cloud

Go to console.cloud.google.com and sign in with your Google account.
2

Create a project

Create a new project and give it a name you will recognize, such as “Webshop map”.
3

Set up billing

When Google asks, add a billing account with your payment card.

​
Step 2: Switch on the APIs

In your project, open Google Maps Platform and switch on (enable) these two:
  • Maps JavaScript API: shows a map on a web page, such as your checkout.
  • Geocoding API: lets customers search an address or an area, and move the map to see the service points there.

​
Step 3: Create the map key and lock it to your webshop

In Google Maps Platform, open Keys & Credentials, click Create credentials and choose API key. Google shows your new key: a long code that starts with “AIza”. Copy it. A key that isn’t locked works on any website, so someone else could use it and you would pay for their maps. Lock it to the addresses where your customers check out.
1

Open the key's settings

Click the name of your new key.
2

Allow only your webshop's addresses

Under Application restrictions, choose Websites. Under Website restrictions, add each address your customers check out on, one at a time:
  • Your own domain, for example https://nordlysliving.dk/*, and the same with *. in front, for example https://*.nordlysliving.dk/*, so addresses such as www. and checkout. are included.
  • Your Shopify address, for example https://nordlys-living.myshopify.com/*.
  • https://shop.app/*, if you switched on Include block in Shop Pay for the picker.
3

Allow only the map

Under API restrictions, choose Restrict key and tick only Maps JavaScript API.
4

Save

Click Save. It can take a few minutes before the new limits work.
Not sure which address your checkout uses? Start a checkout in your webshop and look at the address bar of your browser. That address must be in the list.

​
Step 4: Create the address search key

Address search needs a second key. Unlike the map key, it must not be locked to websites, or address search won’t work.
1

Create a second key

In Keys & Credentials, click Create credentials and choose API key again. Copy the new key.
2

Allow only address search

Click the name of the new key. Under API restrictions, choose Restrict key and tick only Geocoding API.
3

Leave the websites open

Under Application restrictions, choose None. Because the key only allows the Geocoding API, nobody can use it to show maps.
4

Save

Click Save.
Use two different keys. Address search doesn’t work with a key that is locked to websites, so one key can’t do both.
Google renames its menus from time to time. If a name here doesn’t match your screen, Google’s own guide Use API keys shows the current steps.

​
Step 5: Add the keys in Zippendo

1

Open your webshop

Click Order channels in the sidebar. On the Connected tab, click your Shopify webshop. You land on the Orders & checkout tab.
2

Paste the map key

In the Service points at checkout card, or the Service points in the cart card, paste the map key into Google Maps key (optional) and click Save key. You see Google key saved. Both cards use the same keys, so you add them once.
3

Paste the address search key

In the Service points at checkout card, paste the second key into Google address search key (optional) and click Save key. If Google accepts the key, you see Google key saved, and the box says Key saved. Paste a new key to replace it. The cart has no address search, so its card shows only the map key.
Google Maps key (optional) with a saved key, and Google address search key (optional) with Key saved. Paste a new key to replace it, with the buttons Save key and Remove keyGoogle Maps key (optional) with a saved key, and Google address search key (optional) with Key saved. Paste a new key to replace it, with the buttons Save key and Remove key

The two key boxes on the Service points at checkout card

Zippendo doesn’t show the address search key again after you save it. To remove it, click Remove key. To remove the map key, empty its box and click Save key.

​
Check that it works

Start a checkout in your webshop, choose your service point shipping method and click Change service point. With the address search key, the search box above the list says Address, postcode or service point name. With the map key, your customers can switch between List and Map. Map opens a map with a pin for each service point, with the carrier’s logo. With the address search key too, customers can search an address or a postcode above the map, or simply move the map, and the service points there appear.
Select service point window in Shopify checkout with a search box for an address or postcode above a Google map of Copenhagen, and a GLS pin for each service point

The map your customers see after clicking Map

When they click a pin, they see the service point’s name, address and opening hours. Select chooses it, and the map closes.
A pin opened on the map, showing Silvan Vesterbrogade, Vesterbrogade 10, København V, open Mon–Sun 09:00–19:00, with a Select button

Click a pin, then Select

​
Something doesn’t work?

  • There is no map. Copy the map key again from Google Cloud and paste the whole key. Compare the address in your browser during checkout with the Website restrictions on the key, and check that the Maps JavaScript API is on and billing is set up. When checkout shows the shipping methods in a window on top of the page, there is no Map button: Shopify allows no map there.
  • Zippendo says Google didn’t accept this key. The address search key is locked to websites, or the Geocoding API isn’t switched on for it. Fix both in Google Cloud, or make a new key as in Step 4.
  • Customers can’t search an address, or moving the map shows no new service points. Check that you saved an address search key, and that the Geocoding API is still on and billing is set up in your Google Cloud project.
  • You just changed a key. Wait a few minutes and try again.

​
Who sees what

The map comes straight from Google, with your map key. When a customer searches an address or moves the map, Zippendo passes what they typed, or the spot on the map, to Google with your address search key. Both keys run under your own agreement with Google, and Google bills your account. Related: Add the service point picker to Shopify checkout · Service point picker in checkout