How to add “buy online, pick-up in store” capabilities to your website with Google Maps Platform

During this Covid-19 pandemic, we have seen a shift in buying behaviours among consumers. Therefore, it is essential for retailers to have the “buy online, pick-up in store” capabilities on 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 favour 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 Google 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/long 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. You can use 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 the 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 utilise 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. 

For additional tutorials and technical info, check out our Google Maps Platform documentation.