For the majority of us, maps represent a useful tool which we often use in daily life when we are looking for a specific landmark, shopping centre or street name in an unfamiliar town or city.

For business, map is a good marketing tool to attract the customers. Many Companies use Google Map to show its location so that customers can easily reach them.

In this walkthrough I will show how to create a Silverlight application with Bing Map Control. Bing Map control is provided by Microsoft Virtual Earth. Bing Map can be integrated in website by two ways:

• Bing Map AJAX control
• Bing Map Silverlight control

Silverlight have rich set of controls which provide better user experience.

To start you need to download and install following development tools:

	Microsoft Visual Studio 2008 SP1
	Microsoft Silverlight 3 Tools for Visual Studio 2008 SP1
	Bing Maps Silverlight Control SDK v 1.0.1

Create New Bing Maps Silverlight Application with Visual Studio:

Start Visual Studio 2008 and choose File > New > Project…

Select Silverlight from the Project types tree, and Silverlight Application from the Templates list.

Give your application a name and click OK.

A dialog will appear asking if you want to host the application in a new web site. Make sure this option is checked, select ASP.NET Web Application Project, and click OK.

Once project is created simply run the project. You should see a blank web page with URL starting as http://localhost. This confirms that the project is being served by the ASP .NET development server.

Now you need to add reference of Bing Map control’s dll.

Right click on the References folder in the Demo1 project and choose Add Reference.

Select the Browse tab and browse to the Libraries directory in the Bing Maps Silverlight Control installation folder. The default installation location is C:\Program Files\Bing Maps Silverlight Control\V1\Libraries.

Select both the Microsoft.Maps.MapControl.dll and Microsoft.Maps.MapControl.Common.dll assemblies, and click OK.

Modify the xaml for the MainPage.xaml user control by adding following xml namespace declaration for the Bing Maps assembly.

xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl" 

<UserControl x:Class="Demo1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
      
    </Grid>
</UserControl>

Now add following tag which will creates the Map object:

<m:Map x:Name="MyMap"/>

Press F5 and see you have the map in your browser. But you will discover that a map appears in the browser with a message to say that you have invalid credentials.

You need to obtain a Windows Live Id and create an account here https://www.bingmapsportal.com/Account/Register

To obtain the key, enter the Application Name and the URL, and click the Create Key button.

Once you have a key you can apply it by assigning it to the CredentialsProvider property:

<m:Map  x:Name="MyMap" CredentialsProvider="YOUR KEY"/>

Now you can see the map without that message.

The map that appears now is showing the whole world. If you want to show one specific region let say New York as default and zoom up to certain level add code in MainPage.xaml.cs file

using Microsoft.Maps.MapControl;

In MainPage() function after InitializeComponent() add following;

MyMap.Center = new Location(40.71990, -73.99);
MyMap.ZoomLevel = 11;

Here 40.71990, -73.99 is Longitude and Latitude of New York, USA.

Following will add a Icon on the map to show particular location.

<m:Map  x:Name="MyMap" CredentialsProvider="YOUR KEY"
       Mode="Road"  RenderTransformOrigin="0.42,0.557" Margin="0,0,0,0"
       LogoVisibility="Collapsed"  >
       <m:Pushpin Location="40.71990, -73.99">
       </m:Pushpin>
</m:Map>

Hope you enjoy the post !!!

Recently I came across a requirement to show all the customers on the Map.That will help marketing personals and top management to analyze the regional sales.

In the next article I will show how to Show Multiple Locations on the map by fetching customer data from database!!!