Show your pickup locations on a map in the cart widget, and let customers search for the location nearest to them. Both use Google Maps, so you first add your own Google Maps API key. The same key powers the distance and zone methods for local delivery. If you'd rather not use Google, customers can filter locations by region instead.
Before you start
Have a Google Cloud project with billing turned on. Google bills Maps usage to your own Google Cloud account, because the app uses your key.
Turn on Store pickup in Settings, and give each location a complete address. The map and the search find each location from its address. See Add and manage pickup and delivery locations.
Add your Google Maps API key
In Google Cloud Console, create an API key and turn on the Maps JavaScript API, Geocoding API and Places API (New). If local delivery uses Customer within maximum driving distance, turn on the Distance Matrix API too.
In the app, click Settings, then open Store pickup.
In the Location filters card, click Google Maps API key.
In the Google Maps integration window, check Enable Google Maps Integration.
Paste your key into Google API key and click Validate.
When the check finishes and every required API shows Valid, click Save.
You can also open this window from Settings → Integrations: click Set up integration on the Google Maps card (Manage integration once it's on).
Validate tests each API and shows Valid or Not verified next to it, with the reason underneath. You can't save the key until every required API shows Valid. If one shows Not verified:
If the reason says Google took too long to respond, click Validate again.
Otherwise, turn that API on in Google Cloud Console and make sure billing is active. If you've limited the key to certain APIs, add it to that list. Then click Validate again.
If you've limited the key to certain websites, allow your store's domain (for the map and the search) and pickup-admin.appstle.com (for Validate).
The Distance Matrix API only has to pass if local delivery uses Customer within maximum driving distance. Google no longer lets new Google Cloud projects turn it on. If yours can't, you can still save the key and use another delivery method. See Limit local delivery to the areas you serve.
If you check Enable Google Maps or Enable geographic search before you've saved a key, this window opens. Once you save the key, the box is checked for you. Click Save on the page to keep it.
Show your pickup locations on a map
In the app, click Settings, then open Store pickup.
In the Location filters card, check Enable Google Maps.
Click Save.
In the cart widget, customers who select Store Pickup see a map above the list of pickup locations. Each location has a numbered pin, and selecting a pin selects that location. If geographic search is on, the map also shows the customer's position after they search.
Let customers search for nearby locations
In Settings → Store pickup, check Enable geographic search in the Location filters card.
To suggest addresses as customers type, check Enable address autocompletion. It appears once geographic search is on.
Click Save.
Customers see a Find a nearby store box above the locations. With address autocompletion on, they pick their address from the suggestions. With it off, they type an address or postal code and click the search icon. The list then puts the nearest location first and selects it, and each location shows its straight-line distance from them.
To show distances in kilometers or miles, choose a Distance format in Settings → Standards and formats. This also sets the unit for the maximum distances you enter on your locations for local delivery.
To change the wording of the box, go to Settings → Text and translations and edit Search stores label and Search stores placeholder label.
The search only finds addresses in the country chosen under Geolocation country in Settings → Developers. Make sure it's the country your locations are in.
Let customers filter locations by region
If you'd rather not use Google, let customers filter the list instead. This doesn't need a Google key.
In Settings → Store pickup, check Enable advanced location filters in the Location filters card.
Choose what customers filter by: State/province/region, or Custom attribute 1, 2 or 3.
Click Save.
Customers see a Filter stores drop-down above the list of locations. Its options come from your locations: the state or province in each address, or the values you enter in the Custom attributes card on each location page. If no location has a value, the drop-down doesn't show.
The drop-down's first option shows all locations and reads Filter by state/province. If you filter by a custom attribute, change this wording in Settings → Text and translations under All locations label.
Geographic search and advanced location filters can't be on together. While one is checked, the other is greyed out, so uncheck one to use the other.
Things to know
The map and the search need a saved key. If Enable Google Maps or Enable geographic search is checked but no key is saved, the cart widget shows no map, the search finds nothing, and the settings page shows Google Maps API key missing.
Locations are found by address. The map and the search read each location's address, not the latitude and longitude on the location page. If Google can't find an address, that location has no pin and no distance.
Distances need the {{distance}} token. It's in the default Address format in Settings → Store pickup. If you've changed that format, add {{distance}} back where you want the distance to show.
Checkout block. If you use the app's pickup block at checkout, it shows the search too, with a Map / List switch instead of a map above the list. There, the search only works with Enable address autocompletion on.
FAQs
Why doesn't the map show?
Check these, in order:
The key is saved and Enable Google Maps Integration is checked in the Google Maps integration window.
Enable Google Maps is checked and saved in Settings → Store pickup.
Customers have selected Store Pickup in the cart widget. See Let customers choose pickup, delivery or shipping in the cart.
If the map area shows a Google error instead of a map, make sure billing is active on your Google Cloud project and that your key's website restrictions allow your store's domain.
Why are some locations missing from the map?
The map shows the same locations as the list: those that can take every item in the cart. A location in the list without a pin has an address Google can't find, so check it on the location page. If Google can't find any of them, the map stays on New York with no pins.
Why can't customers find their address?
The search only finds addresses in the country under Geolocation country in Settings → Developers, so check it's yours. With Enable address autocompletion on, customers have to pick their address from the suggestions. Pressing Enter alone doesn't search.
Why don't locations show a distance?
Distances appear after a customer searches, and only for locations Google can find. If you've changed the Address format in Settings → Store pickup, make sure it still includes {{distance}}.
Can I use the map without the search?
Yes. Enable Google Maps and Enable geographic search are separate checkboxes.