> For the complete documentation index, see [llms.txt](https://mappy-docs.tech-arms.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mappy-docs.tech-arms.io/faq/frequently-asked/how-to-set-up-map-routes.md).

# How do I set up Map routes?

Show the route, travel time and turn-by-turn steps to a store without sending shoppers off to another tab.

With **Map routes** off, **Get directions** opens Google Maps in a new tab. Turn it on and the same button opens a directions panel inside your store locator, with the route drawn on your map. It is available on every plan.

### Turning it on

Go to **Settings → Appearance → Map routes** and click **Activate**. Tick the **Travel modes** shoppers can choose from — **Driving** and **Walking** are ticked by default, and at least one must stay ticked — then click **Save**.

Deactivating hides the panel but keeps your settings. Travel modes are saved separately for each map type.

<figure><img src="https://3865657835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeFgtK8J1oBXHZFWCEpqi%2Fuploads%2FBB3k4FQyP5pJfZkGu8lM%2Fimage.png?alt=media&amp;token=0d369a38-fab2-4d94-bca6-d7626d6af4c0" alt=""><figcaption></figcaption></figure>

### The provider follows your map type

You do not choose a routing provider — it comes from the **Map type** set in the same page.

| Map type      | Routing provider  | Travel modes                         | What you need                                            |
| ------------- | ----------------- | ------------------------------------ | -------------------------------------------------------- |
| Google Maps   | Google Routes API | Driving, Walking, Bicycling, Transit | Your **Storefront Key**, with the **Routes API** enabled |
| OpenStreetMap | OpenRouteService  | Driving, Walking, Bicycling          | A free OpenRouteService key, entered here                |
| Mapbox        | Mapbox Directions | Driving, Walking, Bicycling          | Your Mapbox token                                        |

**Transit** is only available on Google Maps. While Map routes is active, the **Check** button on your Storefront Key also tests the **Routes API**, and turning Map routes on runs that check again; if your key has no routing available, this section says so. [Enable the **Routes API**](https://console.cloud.google.com/marketplace/product/google/routes.googleapis.com) to see it work.

<figure><img src="https://3865657835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeFgtK8J1oBXHZFWCEpqi%2Fuploads%2Fsqd1UdQycOUnDxCztSAa%2Fimage.png?alt=media&amp;token=633b6dcc-dee2-4aa1-b1e0-1342ee6acd8d" alt=""><figcaption></figcaption></figure>

For OpenStreetMap, [get a free key](https://openrouteservice.org/dev/#/signup), paste it into **OpenRouteService API key**, click **Check**, then click **Save**. You cannot save while Map routes is active and that key is empty or rejected.

<figure><img src="https://3865657835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeFgtK8J1oBXHZFWCEpqi%2Fuploads%2FvXSgmxm2W61qK9xToyS5%2Fimage.png?alt=media&amp;token=d1a20609-31d3-4172-bdf1-932d70f80304" alt=""><figcaption></figcaption></figure>

> The OpenRouteService key is visible in your storefront's page source and cannot be limited to your domain. Use a key created only for this store.

### What shoppers see

Clicking **Get directions** on a store card or in a map popup opens a panel above the store list:

* One button for each travel mode you ticked. The selected one shows the travel time.
* **Start** and **destination** fields, both editable with address suggestions, plus **Use my location**, **Swap**, and one optional **waypoint** (not available on Transit).
* Up to 3 alternative routes, and **Steps** for turn-by-turn instructions.

<figure><img src="https://3865657835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeFgtK8J1oBXHZFWCEpqi%2Fuploads%2FZUjWpAF4aXgTwXi7ukPU%2Fimage.png?alt=media&amp;token=18f79db1-9c60-4831-8d51-52cb50195e44" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3865657835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeFgtK8J1oBXHZFWCEpqi%2Fuploads%2FTB2CQHco72FVhUbOnbx7%2Fimage.png?alt=media&amp;token=4c2233af-736f-43da-92dd-6786c8f3bb49" alt=""><figcaption></figcaption></figure>

Distances follow **Distance Units** in General Settings. Store cards still show the straight-line distance, so the road distance in the panel will be larger. Address suggestions in the panel are not limited by your [Search Suggestion](/faq/frequently-asked/how-does-search-suggestion-work.md) countries.

### What it costs

Routing is billed to your own provider account, not to the app: Google gives 10,000 requests a month for free, Mapbox depends on your plan, and OpenRouteService is free up to 2,000 per day. Opening the panel uses one request, as does every change of travel mode or address the shopper has not already viewed.

***

If you have any related questions, please contact us via **Live chat** or [**support@tech-arms.io**](mailto:support@tech-arms.io) for further assistance.