How to display route and directions on a map in Windows Phone 8

This topic describes how to display the route and directions from your phone’s current location to a specified location on a map in Windows Phone 8.

Tip:

This topic describes how to write code that displays route and directions inside your app. If you simply want to display directions, you can also use the Maps directions task, which launches the built-in Maps app. For more info, see How to use the Maps directions task for Windows Phone 8.

To get the phone’s current location

In Visual Studio, create a new Windows Phone 8 project.

Select the ID_CAP_LOCATION and the ID_CAP_MAP capabilities in the app manifest file.

In Solution Explorer, expand the Properties folder in a C# project or the My Project folder in a Visual Basic project. In a Visual Basic project, you may have to click Show all files before you can expand the My Project folder.

In the expanded folder, locate and open the app manifest file, WMAppManifest.xml.

In Manifest Designer, on the Capabilities page, check the ID_CAP_LOCATION and the ID_CAP_MAP capabilities.

Save your changes and close Manifest Designer.

In MainPage.xaml.cs or MainPage.xaml.vb, replace the default code with the following code. This code get the phone’s current location and adds the phone’s current location coordinates to the MyCoordinates collection.

This code sample provides the coordinates of the phone’s current location as a search hint to the query that finds the destination. The phone’s current location is assumed to be Redmond, Washington, which is not far from the specified destination (Seattle, Washington).

To display the route from the phone’s current location to a location on a map

If you add the control by writing XAML, you also have to add the following xmlns declaration to the phone:PhoneApplicationPage element. If you drag and drop the Map control from the Toolbox, this declaration is added automatically.

In the GetCoordinates() method, after the code in the try block, add the following code. This code sets the destination address entered by the user as the SearchTerm of the GeocodeQuery, and then converts the address to geocoordinates. Then the code sets these geocoordinates as the GeoCoordinate of the GeocodeQuery.

In the GetCoordinates() method, after the code in the try block, add the following code. This code attaches an event handler named Mygeocodequery_QueryCompleted to the QueryCompleted event and calls the QueryAsync method of the GeocodeQuery.

Add the Mygeocodequery_QueryCompleted event handler to the class. This code creates a new RouteQuery object and stores the coordinates of the current location and the specified destination in the Waypoints property of the RouteQuery. It also attaches an event handler named MyQuery_QueryCompleted to the QueryCompleted event of the RouteQuery.

To display directions from the phone’s current location to a location on a map

In MainPage.xaml, delete the entire Grid named LayoutRoot and replace it with the following code. This code adds a LongListSelector control below the map control to display the directions between the two locations.