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
example:
AnXNyW4WcZJ0-tDYsD11a6dMsHH3PHjj0YBPblZCYP4EEbgAbuA1dV7ZjlP_nOPh

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:
xmlns:bing=”using:Bing.Maps”

Add the control

        <bing:Map Grid.Row="1" ZoomLevel="10" Width="640" Height="480" Credentials="{StaticResource BingMapsApiKey}" >
            <bing:Map.Center>
                <bing:Location Latitude="57.6967" Longitude="11.9869" />
            </bing:Map.Center>
            <bing:Map.Children>
                <bing:Pushpin x:Name="test"  Background="Red" >
                    <bing:MapLayer.Position>
                        <bing:Location Latitude="57.6967" Longitude="11.9869" />
                    </bing:MapLayer.Position>
                </bing:Pushpin>
            </bing:Map.Children>
        </bing:Map>

Result:

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 comments on “Example Windows Store App /WinRT: Adding and using Bing Map

  1. Pingback: Windows 8 Developer Links – 2012-10-30 | Dan Rigby

  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?

    • Iris Classon on said:

      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?

    • Raghavendra on said:

      The user region settings of your computer might be set to one of these:
      Argentina
      Azerbaijani
      China
      India
      South Korea
      Morocco
      Pakistan
      Singapore
      Serbia
      Venezuela

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

  3. Pingback: Example Windows Store App /WinRT: Adding and using Bing Map

  4. r aditya on said:

    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” :)

    Regards

    • Iris Classon on said:

      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. :)

      cheers!

  7. José Luis on said:

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

  8. Alan McBee on said:

    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.
    http://msdn.microsoft.com/en-us/library/hh846504.aspx
    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.
    Thanks!

  9. Ricky Brundritt on said:

    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 ?

    • Iris Classon on said:

      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

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

What is 9 + 15 ?
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) :-)