How to Use the Bing Map Control in Windows Phone 7

This article is going to describe how to use the Bing Map control in Windows Phone 7 using Silverlight.

Getting Started

Creating a Windows Phone Application:

• Open Visual Studio 2010.
• Go to File => New => Project
• Select Silverlight for Windows Phone from the Installed templates and choose Windows Phone Application
• Enter the Name and choose the location.

Click OK.



Image 1.

Before using this control you have to do a few things.

Create a Bing Maps developer Account

1. Create a Bing Map developer account. Go to https://www.bingmapsportal.com/ and click Create.
2. Sign in using your Windows Live ID. If you do not have a Windows Live account then you can get one from https://www.bingmapsportal.com/SignIn/Logon . Fill in the required information and click Save.

Create Bing Map Keys

After creating a developer account you can get five bing map keys

1. Go to https://www.bingmapsportal.com/ and click sign in using your windows Live ID.
2. Click on Create or view keys link in left bar.
3. Now fill the Application Name, Application URL, Application Type.
4. Click Submit.

Image 2.



Image 3.

Now add reference of Bing Maps Silverlight Control.



Image 4.

Now add both DLLs in toolbox using choose items.

Now drag and drop Map control from toolbox onto page.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<my2:Map HorizontalAlignment="Left" Margin="14,23,0,0"
Name="map2" VerticalAlignment="Top"
Loaded="map2_Loaded"
Height="534"
Width="436"
/>
</Grid>

.cs

public BingMap()
{
InitializeComponent();
SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
}

private void map2_Loaded(object sender, RoutedEventArgs e)
{
this.map2.NavigationVisibility = System.Windows.Visibility.Collapsed;
}

Now build and run the project.



Image 5.

Here you can see a white bar to remove this white bar you have to put Application Key in like this.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<my2:Map HorizontalAlignment="Left" Margin="14,23,0,0"
Name="map2" VerticalAlignment="Top"
Loaded="map2_Loaded"
Height="534"
Width="436"
CredentialsProvider="Ahk5en93JIJlP4ObG_CqLoLgWU22jhPFJbe52bOTnLEQjw_hYxB3EtthoVLt1COu"
/>
</Grid>

Now run application again.



Image 6.

We are done here, if questions or comments drop me a line in comments section.