Example Windows Store App /WinRT: Adding and using Bing Map
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
Create an account to create and manage Bing Map keys
Create a new key
3. Download the SDK:
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)
Add two references to the project, the map and the C++ runtime package
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
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
[sourcecode language=“csharp”]
<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>
[/sourcecode]
Result:
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:
Create a Location object and set Latitude and Longitude
Create a MapLayer and a Pushpin
Set the Position of the Maplayer and add the pin by the MapLayer.SetPosition property on the class (not instance)
Add the pushpin to the maplayer instance (_mapLayer.Children.Add(pushpin)
Set the the view of the map and for example zoom level MyMap.SetView(loc, 5);
Comments
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?
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
Nice and simple, thanks!
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
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!
How do you change the color of a pushpin from C #?
Pushpin pushpin = new Pushpin();
pushpin.Background = new SolidColorBrush() { Color = Colors.CadetBlue }; 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! 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
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.
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 Last modified on 2012-10-28