In our previous article, we learned how to render a static map, with pan and zoom capabilities, using the Bing Maps API. In this article, we will learn how to create a Bing Map with directions between two or more locations. 

Table of Contents

Code to Render a Bing Map with Routing

The code to render a static map with zoom and panning capabilities is relatively straightforward. Here we have some JavaScript and HTML, although I am using ColdFusion to generate the code from the database, there is no necessary server-side code.

Example of a Bing Map With Map Routing

This complex map shows the route between Asheville North Carolina and the Meadows of Dan in Virginia along the southern section of the Blue Ridge Parkway. This route is considered one of the most beautiful roads in America. 

This map was generated using Galaxie Blogs Post Editor interface which incorporates the Bing Maps V8 Control and the Bing Maps Directions Manager.

Inspecting the Code

The following code is used in our previous creating map routes with the Bing Maps Control article.

Parts of this code are similar to rendering a static map, for example, in the first part of this code, we are instantiating the map, using the compact navigation control, setting the road map type and our zoom property to 12. We will not elaborate with further detail as these options have already been covered in our previous article. 

We will focus instead on discussing the code that deals with routing.

Load the Directions Manager Class

After the initial part of the code, we need to load the Directions Manager which contains various methods to determine routes between two or more locations. Here, we are instructing the Directions Manager to calculate the best routes for driving and setting the color of the route. There are a lot of Directions Manager options, see https://learn.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/directions-module-examples/directions-with-options for more information.

Create the Waypoints

The Waypoints are locations and are used by the Directions Manager class to determine the best route. 

Each waypoint in the code below includes the address, which is the label used on the map, along with the location, which is simply the latitude and longitude of the location separated by a comma. However, both the location and latitude are not mandatory. Only one of these options is necessary. If you use both the address and the location, the location will take precedence and the address will merely become a label. Using both allows you to use custom labels. To determine the latitude and longitude for the location, you can use the Bing Maps V8 Web Control interface to determine the exact locations.

Client-Site Code

Finally, we need to use an empty printPanel and routingMap div that are used to contain directions and the map and make a call to the Bing Maps API by passing your own Bing Maps API key.

<script type='text/javascript'>
	function getRoutingMap() {

        // ***********************************************************************
        // Script for map with routing
        // ***********************************************************************

        // Create a compact horizontal navigation bar
        var routingNavigationBarMode = Microsoft.Maps.NavigationBarMode;

        // Map declaration
        var routingMap = new Microsoft.Maps.Map(document.getElementById('routingMap'), {
            // compact navigation bar	
            navigationBarMode: routingNavigationBarMode.compact, 

            mapTypeId: Microsoft.Maps.MapTypeId.road,
            zoom: 12
        });

        // Routes for routingMap ***************************************
        Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
            var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(routingMap);
            // Set Route Mode to driving
            directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
            // Use the primary color of our theme for the routes
            directionsManager.setRenderOptions({
                drivingPolylineOptions: {
                    strokeColor: '#D4D4D4'
                }
            });
            // Create our waypoints
            var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: 'St George, UT', location: new Microsoft.Maps.Location(37.108284,-113.583275) });
            directionsManager.addWaypoint(waypoint1);

            var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: 'Zion National Park, UT', location: new Microsoft.Maps.Location(37.201981,-112.988426) });
            directionsManager.addWaypoint(waypoint2);

            var waypoint3 = new Microsoft.Maps.Directions.Waypoint({ address: 'Escalante, UT', location: new Microsoft.Maps.Location(37.770374,-111.604179) });
            directionsManager.addWaypoint(waypoint3);

            var waypoint4 = new Microsoft.Maps.Directions.Waypoint({ address: 'Capitol Reef National Park, UT', location: new Microsoft.Maps.Location(38.178154,-111.176857) });
            directionsManager.addWaypoint(waypoint4);

            var waypoint5 = new Microsoft.Maps.Directions.Waypoint({ address: 'Dead Horse Point State Park, UT', location: new Microsoft.Maps.Location(38.505829,-109.73658) });
            directionsManager.addWaypoint(waypoint5);

            var waypoint6 = new Microsoft.Maps.Directions.Waypoint({ address: 'Grand View Point Overlook, UT', location: new Microsoft.Maps.Location(38.310112,-109.856636) });
            directionsManager.addWaypoint(waypoint6);

            var waypoint7 = new Microsoft.Maps.Directions.Waypoint({ address: 'Delicate Arch, UT', location: new Microsoft.Maps.Location(38.743519,-109.499344) });
            directionsManager.addWaypoint(waypoint7);

            var waypoint8 = new Microsoft.Maps.Directions.Waypoint({ address: 'Monument Valley, UT', location: new Microsoft.Maps.Location(37.174244,-109.927055) });
            directionsManager.addWaypoint(waypoint8);

            var waypoint9 = new Microsoft.Maps.Directions.Waypoint({ address: 'Antelope Canyon, AZ', location: new Microsoft.Maps.Location(36.952766,-111.441269) });
            directionsManager.addWaypoint(waypoint9);

            var waypoint10 = new Microsoft.Maps.Directions.Waypoint({ address: 'Page, AZ', location: new Microsoft.Maps.Location(36.910942,-111.456177) });
            directionsManager.addWaypoint(waypoint10);

            var waypoint11 = new Microsoft.Maps.Directions.Waypoint({ address: 'St George, UT', location: new Microsoft.Maps.Location(37.108284,-113.583275) });
            directionsManager.addWaypoint(waypoint11);

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

	}
</script>

<div id="printoutPanel"></div>
<div id="routingMap" class="entryMap"></div>
<!-- The type argument is a Galaxie Blog argument -->
<script type='text/javascript' src='https://sdk.virtualearth.net/api/maps/mapcontrol?key=<cfoutput>#bingMapsKey#</cfoutput>&callback=getRoutingMap&type=route' async defer></script>

Further Reading

Bing Maps Samples (a collection of 227 Bing Map Examples)