Directions widget

Explore in the sandboxView live

This sample demonstrates how to add the Directions widget.

The Directions widget makes it easy to calculate directions between two or more input locations. The resulting directions are displayed with detailed turn-by-turn instructions. The Clear route button calls the reset() method, which clears all the input stops and results in the widget and in the map.

How it works

The geocoding and routing services both require a token for authentication. This sample uses an apiKey to authenticate. You can either replace it with your own apiKey, or remove it and log in once prompted. Alternatively, you can use another authentication method to access the geocoding and routing services.

You must first enter input locations. A minimum of two, start and stop, are required. To enter the location, indicate which stop you are specifying by clicking in the dialog box where it states, Search or click on the map. If you have geolocation enabled in the browser, a prompt will also display in the dialog to Use current location. You can either use the current location, type in an address, or click on the map. If you choose the latter, a reverse geocoding occurs and the resulting address displays as a stop location.

After at least two stops are entered, the resulting directions route displays with turn-by-turn directions. You can also opt to get directions at a specified date and time by changing it from Leave now to Depart by. Alternatively, you can use the Time Unspecified departure option, which uses the average travel time to calculate estimated travel durations.