Today's mobile phones aren't dumb like they were a decade ago. Today, the iPhone or the Droid-X can not only be used for communicating via voice calls but also facilitates instant messages, and can even serve as a GPS or a mapping device. Applications like Four-Square can pinpoint location of contacts on a map so that you can see (or can I say snoop) over where your friends have been to.
A Windows Phone 7 developer too can use the maps feature in his/her applications by using the Bing Maps control, which is the only officially supported control by Microsoft. Applications using Bing Maps can able be referred to as Bing Maps applications.
To get started with using the Bing Maps control in your Bing Maps application, you will need to get a Bing Maps key which is available by registering at https://www.bingmapsportal.com/ If you do not have a Windows Live profile, you will be prompted to create one. If you have one, you can just sign in.
Click on create or sign-in, depending on whether you have a Windows Live ID or not.
Once you complete your registration with the website, you will get to the "My Account" page:
Once you have your account created, you will see the "Create or view Keys" Link on the left side of the page. Click that to create or retrieve your key.
You will be asked to fill in the description of your application.
For the article purposes, I will go ahead and create one called DemoBingMaps.
On submitting this information, a Bing Maps key is generated for me which looks like the example below:
We will use this key in our Bing maps application.
If you want to change the default view rendered, you can set the mode to aerial instead of the default road. For our application we will have a default of aerial mode, so that we can see how the switch to road mode works.
Change your XAML file to contain the highlighted section.
Let us add the functionality to switch between Aerial Mode and Road Mode on the maps.
Now, go ahead and add two buttons on the MainPage. Rename the content of the buttons as Aerial and Road.
Now on the Road Button, double click the button so that the event handler for click is created. In the event handler, add the following code:
private void buttonRoad_Click(object sender, RoutedEventArgs e)
Microsoft.Phone.Controls.Maps.Core.MapMode m = new Microsoft.Phone.Controls.Maps.RoadMode();
Repeat the same with the Aerial button, with the following code
private void buttonAerial_Click(object sender, RoutedEventArgs e)
Microsoft.Phone.Controls.Maps.Core.MapMode m = new Microsoft.Phone.Controls.Maps.AerialMode();
Note that the only difference in the above code snippets is the MapMode; in one, it is RoadMode and in the other it is AerialMode. Now, to fancy our application, let us add a PushPin For that, we need to create an instance of the Pushpin class.
Let us start by adding a button with content "Add Push Pin" which will create a pushpin on the center of the currently visible map area.
Double click the button to wire up the Click Event handler. Add the following code in the button's click Event Handler.
private void buttonPushPin_Click(object sender, RoutedEventArgs e)
Microsoft.Phone.Controls.Maps.MapLayer pushPinLayer = new Microsoft.Phone.Controls.Maps.MapLayer();
TextBlock textBlock = new TextBlock();
textBlock.Text = "DemoPushpin";
Grid grid = new Grid();
Microsoft.Phone.Controls.Maps.Pushpin p = new Microsoft.Phone.Controls.Maps.Pushpin();
p.Location = map1.Center;
pushPinLayer.AddChild(p, map1.Center, Microsoft.Phone.Controls.Maps.PositionOrigin.Center);
pushPinLayer.AddChild(grid, map1.Center, Microsoft.Phone.Controls.Maps.PositionOrigin.Center);
Now if you run this application, you can see that by default the world map is visible in the Aerial Mode. Now you can zoom to a place of your choice and click on the Aerial and Road buttons to switch the view between Aerial view and Road View.
To add a push pin, click the "Add Push Pin" button which will add a push pin in the center of the currently visible area. To ensure that the pushpin has some context, we will add a label with the pin called "DemoPushPin".
If you have look at the complete code listing, a sample project is available for download as an attachment to this article.
In this article, we saw the process to get started with creating applications using Bing Map control. Hopefully you would have found the information useful and will be able to create some great mapping applications.
Vipul Patel is a Software Engineer currently working at Microsoft Corporation, working in the Office Communications Group and has worked in the .NET team earlier in the Base Class libraries and the Debugging and Profiling team. He can be reached at firstname.lastname@example.org