How to add “buy online, pick-up in store” capabilities to your website with Google Maps Platform
Head of Customer Engineering
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.
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:
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
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.