Create an app with Bing Maps (for Windows 8)


If you are using Windows 8.1, see Create an app with Bing Maps (for Windows 8.1). If you have an existing app that was built with Visual Studio 2012 and Windows 8, it is recommended that you upgrade your app to use Visual Studio 2013, Windows 8.1 and the Bing Maps SDK for Windows Store apps (Windows 8.1).

This topic describes how to use Microsoft Visual Studio 2012 and Windows 8 to create a Windows Store app project that displays a map. These steps are for projects that use XAML and C#, C++, or Visual Basic.

If you want to create a project that uses JavaScript, see Developing a Windows Store app using JavaScript in the Bing Maps AJAX Control 7.0 documentation.

Before you create a project, you need to have a Bing Maps Key, and you need to have installed Windows 8 or Windows 8.1, Visual Studio 2012, and the Bing Maps SDK for Windows Store apps.

  1. Start Visual Studio.

  2. Select FILE > New > Project.

  3. In the Installed pane, expand Visual C++, Visual C# or Visual Basic depending on the language you want to use.

    Note: The code samples in this documentation use Visual C#.

  4. Select the Windows Store template type, and then select Blank App (XAML).

  5. Type BingMapsWindowStoreApp as the Name for the project.

  6. Click OK. The project files are created.

IMPORTANT: You must set the Active solution platform in Visual Studio to one of the following supported platforms for your app to work correctly.

  1. Select BUILD from the main menu, then Configuration Manager.

  2. Choose one of the following supported solution platforms for the current project.

    • C#, Visual Basic: ARM, x86 or x64

    • C++: ARM, Win32 or x64

Add a reference to the Bing Maps SDK for C#, C++, or Visual Basic and the Visual C++ Runtime Package.


IMPORTANT: If you are using C# or Visual Basic, you must still add a reference to the Microsoft Visual C++ Runtime Package.

  1. Select PROJECT, then Add Reference from the main menu. (For a Visual C++ project, select PROJECT >yourProjectName Properties, then click Add Reference.)

  2. In the Add Reference dialog, expand Windows, then select Extensions.

  3. Check Bing Maps SDK for C#, C++, or Visual Basic and the Microsoft Visual C++ Runtime Package and click OK.

  1. Open MainPage.xaml in your project. This file contains the XAML that defines the user interface.

  2. Add the following namespace declaration in the Page tag.


    Insert the following XAML inside the <Grid> tags, and replace the placeholder INSERT_YOUR_BING_MAPS_KEY with your Bing Maps Key.

    <bm:Map Credentials="INSERT_YOUR_BING_MAPS_KEY" x:Name="myMap"></bm:Map>
  3. Your code should look like this:

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <bm:Map Credentials="INSERT_YOUR_BING_MAPS_KEY" x:Name="myMap"></bm:Map>
  4. Run the code, and a world map appears.

You can customize the map properties on the map using XAML or using code-behind.

To customize the map in XAML, you can set the MapType and ZoomLevel properties within the Map tag and then set the Center as a separate XAML tag. To set map dimensions in pixels, use the Width and Height properties.

<bm:Map Credentials="INSERT_YOUR_BING_MAPS_KEY" x:Name="myMap" 
     MapType="Aerial" ZoomLevel="12"
      Width="600" Height="800">
    <bm:Location Latitude="46.227480" Longitude="-122.192955" />

To set these properties using code-behind, open the BlankPage.xaml.cs file and reference the Bing Maps namespace (Bing.Maps) with a using statement.

Using System;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Bing.Maps;

Then insert the following InitializeMap method and method call in the BingMapsWindowsStoreApp namespace.

Namespace BingMapsWindowsStoreApp
    public sealed partial class MainPage : Page
        public MainPage()

        void InitializeMap()
              myMap.Center = new Location(46.227480,-122.192955);
              myMap.ZoomLevel = 12;
              myMap.MapType = MapType.Aerial;
              myMap.Width = 600;
              myMap.Height = 800;


Both methods create the following map image.

Bing Map showing aerial view