Adding Microsoft Bing Maps to your Web Applications

Article
11/10/2009

The Bing Maps Silverlight Control 1.0 has just been released. You can now use Microsoft Bing Maps in your web application in three different methods. However, before you get started, you need to download the Silverlight Control SDK and create a Bing Maps Key to authenticate your application. To obtain Bing Maps Keys, first go to the Bing Maps Accounts Center and create a Bing Maps Developer Account. You can create a key for your local application with URLs like “https://localhost:35465/SilverlightApplication1TestPage.aspx”

Method #1: Embedding a Map into Your Web Page

To embed a map into your Web page, add an iframe tag to your Web page and set the src parameter to the embedded map URL. The following code adds a simple Road map to a Web page.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Embedded Map</title>
      <meta http-equiv="Content-Type" content="text/html; 
        charset=utf-8">
   </head>
   <body style="font-family:Arial">
      <p>A simple embedded map.</p>
      <iframe width="400" height="300" frameborder="0" 
         scrolling="no" marginheight="0" marginwidth="0"
         src="https://dev.virtualearth.net/embeddedMap/v1/
              silverlight/aerial?zoomLevel=10&center=47.5_-122.5&
              pushpins=47.5_-122.5"/>
   </body>
</html>

Method #2: Using Script to Load a Silverlight Map. This method requires an application key.

To begin, load the Bing Maps Silverlight Control by referencing the Bing Maps Silverlight Control XAP file in an object tag on your Web page. Set the “source” param to the Bing Maps Silverlight Control XAP file. The Bing Maps Silverlight Control XAP file reference is https://dev.virtualearth.net/silverlight/mapcontrol/v1/Microsoft.Maps.MapControl.xap. In addition, you need to provide a valid Bing Maps Key. Set your key using another param tag for the object. Information about getting a Bing Maps Key is found in the Accessing the Control Using a Bing Maps Key topic.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title>Load a Silverlight Map</title>
      <meta http-equiv="Content-Type" content="text/html; 
      charset=utf-8">
   </head>
   <body>
      <div id="silverlightControlHost">
         <object id='slCtl' data="data:application/x-silverlight,"
            type="application/x-silverlight-2" width="800" 
             height="500">
            <param name="source" 
               value="https://dev.virtualearth.net/silverlight/
             mapcontrol/v1/Microsoft.Maps.MapControl.xap" />
            <param name="enableHtmlAccess" value="true" />
            <param name="initParams" 
                 value="ApplicationId=Your Key”/>
         </object>
      </div>
   </body>
</html>

Method #3: Creating a Basic Application Using the Silverlight Map Control. This method requires an application key.

If you want the full functionality of the Bing Maps Silverlight Control, then you need to create a Silverlight application that loads the Bing Maps Silverlight Control. You create a Silverlight application and use the Silverlight Map Control as outlined the steps below:

Create a Silverlight Project Using Visual Studio 2008 or Visual Studio 2010 (Beta)
Browse to the location of your Bing Maps Silverlight Control installation (default location on a 64-bit OS is C:\Program Files (x86)\Bing Maps Silverlight Control\V1\Libraries). Open the Libraries folder, select the Microsoft.Maps.MapControl.dll and the Microsoft.Maps.MapControl.Common.dll files
Modify the user control by adding your application key and the map tag as shown in blue color.

 <UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;<br>          assembly=Microsoft.Maps.MapControl" > 
    <Grid x:Name="LayoutRoot" Background="White">
         <m:Map CredentialsProvider="your key" Mode="Aerial" /> 
    </Grid>
</UserControl>

A sample Visual Studio 2010 project is attached in the zip file. You can view these three different methods with ShowBingMaps1.htm, ShowBingMaps2.htm and ShowBingMaps3.htm.

Technorati Tags: Bing Maps,Silverlight Control

Adding Microsoft Bing Maps to your Web Applications

Additional resources