The directions Map Mode
Explore how to use the directions map mode to display routes, distances, and travel times between multiple points. Understand how to set origin, destination, and waypoints parameters to create interactive embedded maps showing driving directions.
We'll cover the following...
The directions map mode
The directions mode will display a route, distance, and travel time between two or more specified points. The base URL of this map mode looks like this:
https://www.google.com/maps/embed/v1/directions?key=API_KEY&PARAMETERS
The directions map mode parameters
We can use the following parameters in the directions map mode:
Parameters | Category | Description |
| Required | This parameter defines the point of origin from which to display the directions. It accepts plus codes or URL-encoded addresses as input. |
| Required | This parameter defines the destination of the directions. It accepts plus codes or URL-encoded addresses as input. |
| Optional | This parameter specifies one or more waypoints between the origin and destination. It accepts plus codes or URL-encoded addresses as input. |
| Optional | This parameter specifies the mode of travel. If no mode is specified, the map will show one or more of the most relevant modes for the specified route. It accepts |
| Optional | This parameter specifies features to avoid when determining route directions. It doesn’t remove routes that have the features to avoid, but is biased towards more suitable routes instead. It accepts |
| Optional | This parameter specifies the measurement unit when displaying distances in the results. If no units are specified, the API uses the origin region to determine the units. It accepts |
| Optional | This parameter sets the center of the map view. It accepts comma-separated latitude and longitude values as input. |
| Optional | This parameter sets the initial zoom level of the map view. It accepts integer values ranging from The maximum possible zoom value varies depending on the location but is usually |
| Optional | This parameter defines which map type loads. It only accepts |
| Optional | This parameter defines the language for the UI elements and labels on the map. It accepts a two-character ccTLD region code as input. |
| Optional | This parameter defines the appropriate borders and labels to display, and tailors them according to the geopolitical sensitivities of a region. It accepts a two-character ccTLD region code as input. |
Code example
The code example below displays different routes between Seattle and New York, including corresponding distances and travel times:
In lines 13–17, we pass the values Seattle+USA and New+York+USA to the origin and destination parameters, respectively. The values Chicago+USA|Washington+DC+USA are passed to the waypoints pointer. This will display all the possible driving routes from Seattle to New York with stops in Chicago and Washington D.C.