Along a Route Search

This example shows how to search for locations along a route. It uses the built-in direction input panel and the Fourth Coffee Sample data source to search for coffee shops that are along a route.

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

        //Query URL to the Fourth Coffe Shop data source
        var sdsDataSourceUrl = '';

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

            //Create a layer for rendering the data that is along a route.
            dataLayer = new Microsoft.Maps.Layer();

            //Add the layer to the map.

            //Add click event to shapes in the data layer.
            Microsoft.Maps.Events.addHandler(dataLayer, 'click', shapeClicked);

            //Create an infobox at the center of the map but don't show it.
            infobox = new Microsoft.Maps.Infobox(map.getCenter(), {
                visible: false

            //Assign the infobox to a map instance.

            //Load the directions and spatial data service modules.
            Microsoft.Maps.loadModule(['Microsoft.Maps.Directions', 'Microsoft.Maps.SpatialDataService'], function () {
                //Create an instance of the directions manager.
                directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);

                //Specify where to display the route instructions.
                directionsManager.setRenderOptions({ itineraryContainer: '#directionsItinerary' });

                //Specify the where to display the input panel

                //Add event handler to directions manager.
                Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', directionsUpdated);

        function directionsUpdated(e) {

            var currentRoute = directionsManager.getCurrentRoute();

            if (!currentRoute) {
                alert('No route found.');

            var routeRequest = directionsManager.getRequestOptions();

            var routeMode = getRouteMode(routeRequest);

                alert('Transit mode is not supported for near route queries.');

            //Create a query to get nearby data.
            var queryOptions = {
                queryUrl: sdsDataSourceUrl,
                spatialFilter: {
                    spatialFilterType: 'nearRoute',
                    start: currentRoute.routeLegs[0].startWaypointLocation,
                    end: currentRoute.routeLegs[0].endWaypointLocation,
                    travelMode: getRouteMode(routeRequest),
                    optimize: getRouteOptimization(routeRequest)

            //Process the query.
  , map, function (data) {
                //Add results to the map.

        function getRouteMode(routeRequest) {
                case Microsoft.Maps.Directions.RouteMode.driving:
                    return 'Driving';
                case Microsoft.Maps.Directions.RouteMode[routeRequest.routeMode].walking:
                    return 'Walking';

            return null;

        function getRouteOptimization(routeRequest) {
                case Microsoft.Maps.Directions.RouteOptimization.timeWithTraffic:
                    return 'timeWithTraffic';
                case Microsoft.Maps.Directions.RouteOptimization.shortestDistance:
                    return 'distance';
                case Microsoft.Maps.Directions.RouteOptimization.shortestTime:
                    return 'time';

        function shapeClicked(e) {
            //Make sure the infobox has metadata to display.
            if (e.primitive.metadata) {
                //Set the infobox options with the metadata of the pushpin.
                    location: e.primitive.getLocation(),
                    title: e.primitive.metadata.Name,
                    description: 'Store Type: ' + e.primitive.metadata.StoreType,
                    visible: true
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;

        .directionsContainer {
            width: 380px;
            height: 100%;
            overflow-y: auto;
            float: left;

        #myMap {
            position: relative;
            width: calc(100% - 380px);
            height: 100%;
            float: left;
    <script type='text/javascript' src='[YOUR_BING_MAPS_KEY]' async defer></script>
    <div class="directionsContainer">
        <div id="directionsPanel"></div>
        <div id="directionsItinerary"></div>
    <div id="myMap"></div>

Running this code will display a map and the directions input panel. Calculating a route from "Redmond, WA" to "Seattle, WA" will display a route on the map and nearby coffee shops. Clicking on a coffee shop will show the name of the coffee shop and the type of store it is.