Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Create a Windows Store app with Bing Maps (for Windows 8)

Create an app with Bing Maps (for Windows 8)

Bing
Hh846489.Warning(en-us,MSDN.10).gifCaution:
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.

Verify installation requirements

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 .

Create a Windows Store app

  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.

Set the Active Solution Platform

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

Reference Bing Maps SDK and Microsoft Visual C++ Runtime Package

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

Hh846489.Important(en-us,MSDN.10).gifImportant:
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.

Add a map using XAML and code-behind

  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.

    xmlns:bm="using:Bing.Maps"
    
    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:

    <Page
        x:Class="BingMapsWindowsStoreApp.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:BingMapsWindowsStoreApp"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:bm="using:Bing.Maps"
        mc:Ignorable="d">
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <bm:Map Credentials="INSERT_YOUR_BING_MAPS_KEY" x:Name="myMap"></bm:Map>
        </Grid>
    </Page>
    
  4. Run the code, and a world map appears.

Customize your map

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

Using XAML

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:Map.Center>
    <bm:Location Latitude="46.227480" Longitude="-122.192955" />
  </bm:Map.Center>
</bm:Map>

Using code-behind

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()
        {
            this.InitializeComponent();
            InitializeMap();
        }

        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
Show:
© 2015 Microsoft