Oct 282012
 October 28, 2012  Posted by at 10:41 pm WinRT Tagged with: , , ,  Add comments

While Window Phone wont be using Bing Maps , but rely on Nokia Maps, Windows Store Apps will be using Bing Maps. Working with the map is fairly easy, but the setup as a few steps that might scare of a few beginner devs. Since I’m working on a cross platform app that uses Bing Maps I’ve made a simple step by step guide on how to add and use the Bing Map in a Windows Store Application using XAML only.

Let’s get started:

1. Greate an account for so you can get a Bing Map Key
Create the Bing Map account here

2. Create a key , set app name and key type

How to add Bing Map to Windows Store App

Create an account to create and manage Bing Map keys

How to create key for windows store app

Create a new key

3. Download the SDK:
Bing Maps SDK for Metro style apps (RP)

Bing Maps SDK for Metro style apps (RP

Bing Maps SDK for Metro style apps (RP

4. Add the SDK to your app (Add reference) and change configuration settings for the project
Add also Microsoft Visual C++ Runtime Package
In configuration manager set active solution platform to x86 an debug (ARM and x64 also works)

How to reference the Bing Maps in windows store app

Add two references to the project, the map and the C++ runtime package

How to set up Bing maps in windoes store app

Don't forget to change in the configuration manager

5. Add the key for the map as a resource, either in a resource dictionary or in the App.xaml

Add the Bing Map Key as a string resource

Add the Bing Map Key as a string resource

6. Add a reference to the Map api on the page where you want to display the map and set credentials to the Bing Map Key:

Add the control

[sourcecode language=”csharp”]
<bing:Map Grid.Row="1" ZoomLevel="10" Width="640" Height="480" Credentials="{StaticResource BingMapsApiKey}" >
<bing:Location Latitude="57.6967" Longitude="11.9869" />
<bing:Pushpin x:Name="test" Background="Red" >
<bing:Location Latitude="57.6967" Longitude="11.9869" />


Bing Maps for Windows Store Apps

Bing Maps for Windows Store Apps

To work with bindings simply use {Binding something} for Latitude and Longitude and ZoomLevel and so on. To set a pin in code behind:

  1. Create a Location object and set Latitude and Longitude
  2. Create a MapLayer and a Pushpin
  3. Set the Position of the Maplayer and add the pin by the MapLayer.SetPosition property on the class (not instance)
  4. Add the pushpin to the maplayer instance (_mapLayer.Children.Add(pushpin)
  5. Set the the view of the map and for example zoom level MyMap.SetView(loc, 5);

  16 Responses to “Example Windows Store App /WinRT: Adding and using Bing Map”

  1. […] short article explains how to write and use behaviors in Windows 8 Store apps…”Example Windows Store App /WinRT: Adding and using Bing Map (Iris Classon)“Since I’m working on a cross platform app that uses Bing Maps I’ve […]

  2. I did the above said procedure, but I’m getting a red crossed circle over the maps like when we give invalid credentials. Do you know why is it?

    • That is very odd, I’m looking at a the working example right now, but no cross. If the key is wrong or credentials are missing then a text overlay on the map should indicate that. How does you XAML look like?

    • The user region settings of your computer might be set to one of these:
      South Korea

      Bing Maps is not supported in these regions.
      Check for Supported Regions in “Bing Maps for Windows Store Apps” on msdn

  3. […] original post at Iris Classon's Blog While Window Phone wont be using Bing Maps , but rely on Nokia Maps, Windows Store Apps will be […]

  4. Hi, Mrs. Iris Classon

    I have little problem. In this case i build the application on javaScript windows 8 Grid app. in my project, i use application bar. One of the application bar button. Navigate to bing Maps page. which is i made before..
    Bing Maps doesn’t appears when i was navigate to bing Maps page(Page Control) not HTML Page.. my code running well.. i guarantee that..
    but, when i try build the maps in Blank App.. its running well and work..
    I don’t know exactly about that..

    hope you can help me.

    Thanks in advance

  5. Nice and simple, thanks!

  6. Hi, EX Red headed lady ๐Ÿ™‚

    Wow i was surprised, got this link from twitter, was surprised to see who the author was (ex fitness girl headed into stratosphere of popularity) . Will give it a try but knowing your rep im sure it works fantastically ๐Ÿ™‚ bit more advanced than the “stoopid questions” ๐Ÿ™‚


    • Hi Mark!!!

      Nice to hear from you again! Hope you had a good Christmas and a good start to the new year ๐Ÿ™‚
      LOL, where did the link come from? It should be fairly straight forward to use, if it’s WP8 you can use Nokia Maps instead (downside is they don’t fully support databindings in their maps).

      Let me know if you have any problems/questions etc. ๐Ÿ™‚


  7. How do you change the color of a pushpin from C #?

  8. Hi Iris,
    This is a well-written post, but I have a question on your last point.
    You said, “To work with bindings simply use {Binding something} for Latitude and Longitude and ZoomLevel and so on.”
    Did you actually get this to work? I have not. I also see, in the documentation, that binding is not supported, which is unfortunate since its a vital part of the MVVM pattern.
    The only workaround I’ve come across so far involves a bindable wrapper class (http://bindablemaprt.codeplex.com/). So if you got this to work, I’d love to know how.

  9. For technical issues around the Bing Maps for Windows Store Apps SDK try asking in the forums here: http://social.msdn.microsoft.com/Forums/en-US/bingmapswindows8/threads
    Myself and the Bing Maps development team frequently answer questions here.

  10. so useful but please can you tell me how can i get my current location ?

    • Like so:
      // Dont use void!
      async void GetLocation()
      Geoposition pos = await new Geolocator().GetGeopositionAsync();
      – on the object you can access the position
      And dont forget to declare the location use in the app manifest

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



What is 9 + 4 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)