Using Bing Maps Control in Your Windows Phone 7 Applications

by Vipul Vipul Patel

Read along as Vipul Patel discusses how to use Bing Maps control in your Windows Phone 7 (WP7) applications.


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.

Getting Started

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.

Windows Live
Figure 1

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:

My Account page
Figure 2

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.

a Bing Maps key is generated
Figure 3

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:

Figure 4

We will use this key in our Bing maps application.

Complete details of getting a Bing Maps key for use in your application is available here: http://go.microsoft.com/fwlink/?LinkID=198152.

Using the Bing Maps Control in your Bing Maps Application

Let us get started developing our application.

Start Microsoft Visual Studio 2010 and select to create a new project. Select the template "Windows Phone Application" from the list of available templates under "Silverlight for Windows Phone".

Type in the name "BingMapsDemo" and click OK.

Figure 5

Once your click OK, the project is created. On the MainPage.xaml, drag and drop the Map control from the Toolbox.

Figure 6

By default, the control will only be the size of a button. Make sure you stretch it to a larger size suitable for your application. For our case, we will make it fit the width of the phone.

Figure 7

If you build and debug your application at this point, the map control will complain about invalid credentials.

To fix that issue, let us use the Bing Maps key we just obtained above in our application.

Here is the change we make to add the key

  <my:Map Height="375" HorizontalAlignment="Left" Name="map1" VerticalAlignment="Top" Width="456" CredentialsProvider="AtZjYxf45FIyRhN9hhrWbSCYzT8AjyoEbHQq8PNVr9iiO6dgZXJEw-ZFS7NjCVww" />

Note that adding Key directly in the xaml file is not recommended. Use a resource to assign the value.

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.

  <my:Map Height="375" HorizontalAlignment="Left" Name="map1" VerticalAlignment="Top" Width="456" CredentialsProvider="AtZjYxf45FIyRhN9hhrWbSCYzT8AjyoEbHQq8PNVr9iiO6dgZXJEw-ZFS7NjCVww" Mode="Aerial" />

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();
               map1.SetMode(m, true);
   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();
               map1.SetMode(m, true);

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.

Related Articles

This article was originally published on Monday Jan 10th 2011
Mobile Site | Full Site