Skip to content
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
How to add “buy online, pick-up in store” capabilities to your website with Google Maps Platform
Dave McClusky
Head of Customer Engineering
Apr 23, 2020
Try Google Maps Platform
Unlock access to real-world data and insights with a monthly $200 Google Maps Platform credit.
Get started

Editor's note: To support companies and developers addressing changing consumer and business needs, we’re sharing our best practices over the coming weeks for adding new functionality to your apps and websites.

One of the most common questions retailers ask us is how they can quickly add “buy online, pick-up in store” capabilities to their websites. Google Maps Platform offers many ways businesses can support customers who want to do things like purchase groceries online, but pick them up at the nearest location. Below is an overview of the APIs that can help make your customer’s journey as easy as possible, so they can focus on staying healthy and safe. 

Simplify checkout 

We know a quick and frictionless checkout experience is a top priority for online retail businesses.  Incorporating the Places Autocomplete API into your checkout makes for faster and more accurate address entry of the customer’s home location. Having an accurate address is an essential first step in locating the user and routing them to the nearest store as efficiently as possible. Here are some tips to improve the accuracy of your autocomplete suggestions:

  • When using the Javascript library or web service, set geographic bounds to favor suggestions in an approximate area or location (locationRestriction for iOS and Android)

  • Set autocomplete types to restrict the results to addresses only

  • Use componentRestrictions to restrict results to specific countries only

Identify the best pick-up location 

Right now, many people are staying close to home when picking up essential goods. With a combination of the Geocoding API, Distance Matrix API, and our Maps APIs for JavaScript, Android, and iOS, you can identify the nearest pick-up location for your customers and display it to them on a map. 

First, after obtaining the user’s home address using Autocomplete, you can call the Geocoding API to determine the lat/lng position of the user’s home address (using Place_ID from Autocomplete). You can use that lat/lng to search your inventory and store database to find the nearest pickup location. However, the results returned from databases are typically “as the crow flies,” and not representative of actual walk or drive times. We recommend using the Distance Matrix API to sort these results by actual walking or driving distance using real-time and historical traffic information. For a tutorial on using the Distance Matrix API, check out this blog post

After determining the best store for pickup, display a map with the location of the store to pick up from so your user sees exactly where they need to go. Here’s a tutorial about how to add a simple map with a marker to your site. You can enhance this map by showing a route from the customer’s home location to the store using the Directions API.

Finally, to make sure they don’t forget which store to go to, include a Static Map in a rich email receipt to remind the customer of their pick-up location. 

Give directions for a seamless pick-up experience

Now that your customer knows what location they’ll pick up from, you can help them get there by providing directions. The Directions API will provide turn-by-turn directions with real-time traffic information to your customers. In a world where people may be venturing to new or unfamiliar locations based on inventory of essential items, embed Street View imagery to make it easier for the customer to locate the store. 

Use real-time traffic to estimate the customer’s arrival time and have the pick-up ready

For orders from a mobile app, it may be useful to utilize the customer’s real-time location so you can ready the item for pick-up just as they’re arriving. Frequently poll the device for the user’s location, and call the Distance Matrix API to get an updated arrival time with current traffic conditions. 

Protect customers’ location privacy

If you use your customer’s real-time location, please make sure to check and comply with the end user location privacy terms in the Google Maps Platform Terms of Service

Next up, we’ll give you an overview of how you can use Google Maps Platform to add a delivery or ecommerce platform to your website or app. For additional tutorials and technical info, check out our Google Maps Platform documentation. And to learn more about Google Maps Platform, visit our website.

Clay cityscape
Clay cityscape
Google Maps Platform
Get going with Google Maps Platform