How to add a Map control to a page in Windows Phone 8
December 04, 2013
Applies to: Windows Phone 8 only
This topic describes the various ways to add a Map control to a Windows Phone 8 project. The Map control is part of the libraries in Windows Phone SDK 8.0. Because the Map control is not a core control in memory, it must be referenced properly before you can use it. You must also add an ID_Cap_Map capability before you add the control to the project.
This topic describes how to write code that displays a map inside your app. If you simply want to display a map, you can also use the Maps task, which launches the built-in Maps app. For more info, see How to use the Maps task for Windows Phone.
For a sample that demonstrates some of the tasks described in this topic, download the Simple Map control sample.
For useful extensions to the Maps API, including a Pushpin, download the Windows Phone Toolkit.
This topic contains the following sections.
You must add an ID_Cap_Map capability before you add the Map control.
To add the ID_Cap_Map capability
In Visual Studio 2012, create a new Windows Phone 8 project named MapApplication.
In the MapApplication project, click the Properties folder, and then double-click WMAppManifest.xml file.
In WMAppManifest.xml file, click the Capabilities tab.
In the Capabilities table, select ID_Cap_Map capability.
The easiest way to add a Map control and reference it properly is to drag it from the Toolbox and drop it to your XAML designer or XAML view.
To add a Map control from the Toolbox
In the MapApplication project, open the Toolbox, and then open the All Windows Phone Controls.
From the Toolbox, drag the Map control to the XAML or designer view.
Visual Studio performs the following tasks automatically.
Adds a reference to Microsoft.Phone.Maps assembly.
In the <phone:PhoneApplicationPage> start tag of the XAML page, adds the following XML namespace declaration for the SDK namespace.
Adds the following XAML to your page if you drag the control to XAML view.
Adds the following XAML if you drag the control to the design view.
To add a Map control manually by using XAML, you must first add a reference to Microsoft.Phone.Maps assembly, and then you must map an XML namespace to the assembly.
To add a reference to the Microsoft.Phone.Maps assembly in Visual Studio
In your MapApplication project, right-click the Project menu, and then select Add Reference.
In the Reference Manager dialog box, click Browse.
Browse to C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\WindowsPhone\v8.0.
Double-click the Microsoft.Phone.Maps.dll file.
To add an XML namespace mapping
In the <phone:PhoneApplicationPage> start tag of the XAML page, add the following XML namespace declaration for the SDK namespace.
To add the Map control by using XAML
To add the Map control by using code
Before you can publish an app that uses the Map control, you have to get an ApplicationId and AuthenticationToken from the Windows Phone Dev Center and add the values to your code. The values that you get are specific to the individual app for which you request them.
To get an ApplicationID and AuthenticationToken from the Dev Center
After you have finished your app, begin the app submission process.
On the Submit app page, click Map services.
The Map services page opens.
On the page, click Get token.
The new ApplicationID and AuthenticationToken are displayed on the same page.
Copy the values and paste them into your code as described in the following procedure.
Rebuild your app with the new code and upload and updated copy to the Store.
You have to set the values of both the ApplicationId and AuthenticationToken properties after the first Map control has been loaded, not just instantiated. If you destroy all instances of the Map control in your app and then create a new instance, you have to set these properties again.
To specify the ApplicationID and AuthenticationToken in your code
In Visual Studio, in your code, create an event handler for the Loaded event of the Map control.
Copy each of the values that you obtained from the Dev Center and assign them to the respective properties, as show in the following code: