How to Use the Bing Map Control in Windows Phone 7

Posted by Raj Kumar Articles | Windows Phone February 07, 2011
This article describes how to use the Bing Map control in Windows Phone 7 using Silverlight.
Reader Level:


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.

img1.jpg

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.

img2.jpg

Image 2.

img3.jpg

Image 3.

Now add reference of Bing Maps Silverlight Control.

img4.jpg

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.

img5.jpg

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.

img6.jpg

Image 6.

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

COMMENT USING

Trending up