Calculate Transit Directions

The following example shows how to calculate transit directions from “Redmond, WA” to “Seattle, WA” leaving an hour from the current time. The directions are displayed on the map and instructions are rendered in a div element with an id of directionsItinerary.

<!DOCTYPE html>
    <meta charset="utf-8" />
	<script type='text/javascript'>
        var map;
        var directionsManager;

        function GetMap()
            map = new Microsoft.Maps.Map('#myMap', {});

            //Load the directions module.
            Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
                //Create an instance of the directions manager.
                var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
                //Calculate a date time that is 1 hour from now.
                var departureTime  = new Date();
                departureTime.setMinutes(departureTime.getHours() + 1);

                //Set Route Mode to transit.
                    routeMode: Microsoft.Maps.Directions.RouteMode.transit,
                    time: departureTime,
                    timeType: Microsoft.Maps.Directions.TimeTypes.departure

                //Add waypoints.
                var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: 'Redmond, WA' });

                var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: 'Seattle, WA' });                

                //Set the element in which the itinerary will be rendered.
                directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('directionsItinerary') });

                //Calculate directions.
    <script type='text/javascript' src='[YOUR_BING_MAPS_KEY]' async defer></script>
    <div id="myMap" style="position:relative;width:800px;height:600px;"></div>
    <div id='directionsItinerary'></div>

Running this code will display a transit route from “Redmond, WA” to “Seattle, WA” with a departure time that is an hour from now, instructions are displayed below the map.


Try it now