How to embed Bing Maps in an ASP.NET page

Article ID: 2494266
Expand all | Collapse all

On This Page

INTRODUCTION

This article describes an All-In-One Code Framework sample that is available for download. This code sample demonstrates how to embed Bing Maps in a Microsoft ASP.NET page. You can get the sample package from the download icons below.

Difficulty level

Collapse this imageExpand this image
codefx Medium

Download information

To download this code sample, click one of the following links:

    


Technical overview

Sometimes you may need to embed a map in your page to point out a location. You may not want the map to be just an image, but something you can also move, zoom in, or zoom out to view the location’s surroundings. To accomplish this, you can use the AJAX Bing Maps API.

The map control in the Bing Maps API is a JavaScript control that contains several objects, methods, and events. The JavaScript control allows you to display maps that are powered by Bing Maps on a website. You can get more information about the JavaScript control by searching for the keywords "VEMap Class."

If you want to create maps for commercial usage, you may need to use the Bing Maps Account Center to register your application. When you register your application, you will receive a Bing Maps Key that you can use to load the Bing Maps AJAX Control. Bing Maps will track your usage of the Bing Maps API, and provide usage reports on the Bing Maps Account Center.

For more information about Bing Maps Usage Reports, visit the following Microsoft website:
General information about Bing Maps Usage Reports

Sample Overview

This code sample contains only one page without any behind code. There are two main parts in the Default.aspx page. One part contains some JavaScript functions, and the other part contains HTML code for page layout and input controls.

Note You can find the Default.aspx page in the Visual Studio IDE.

To embed a Bing Maps map in a page, follow these steps :
  1. Insert the following code to add a Panel control to the page. The name of the Panel control is pnlMap.
    <asp:Panel ID="pnlMap" runat="server" style="position:absolute; width:400px; height:300px;" />
  2. Insert the following code to add a JavaScript reference for the map control to the header section.
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
  3. Insert the following code to call a JaveScript function to load the map while the page is loading.
    <script type="text/javascript">
        function LoadMap() {
            // Create a new instance of the VEMap Class
            // pnlMap is the ID of the Panel
            var map = new VEMap('pnlMap');
            // Call the VEMap.LoadMap method to load the map
            map.LoadMap();
        }
    </script> 
    <body onload="LoadMap();">
  4. When you browse the page, a basic map is displayed.
To enable more controls for the map, you can use some text box controls and drop-down list controls. Based on the input values in the controls, you can call the following JavaScript function to change the map.
function FindLoc() {
    var loc = document.getElementById("txtLocation").value;
    try {
        map.Find(null, loc);
    } catch (e) {
        alert(e.message);
    }
}

Technology category

  • Microsoft ASP.NET 2.0
  • Microsoft ASP.NET 3.5
  • Microsoft ASP.NET 4.0

Languages

This code sample contains the following programming languages:
Collapse this tableExpand this table
LanguageProject Name
Visual C#CSASPNETBingMaps
Visual Basic.NETVASPNETBingMaps

Prerequisites

  • To run this sample code, you must have the .NET Framework 4 installed.
  • This sample code was created by using Microsoft Visual Studio 2010.


MORE INFORMATION

What is All-In-One Code Framework?

All-In-One Code Framework shows most Microsoft development techniques by using code samples in different programming languages. Each example is carefully selected, composed, and documented to show one common code scenario. For more information about All-In-One Code Framework, visit the following Microsoft website:
http://1code.codeplex.com

How to find more All-In-One Code Framework samples

To find more All-In-One Code Framework samples, search for "kbcodefx" together with related keywords on the Microsoft support Web site. Or, visit the following Microsoft website:
All-In-One Code Framework samples
Rapid publishing disclaimer
Microsoft corporation and/or its respective suppliers make no representations about the suitability, reliability, or accuracy of the information and related graphics contained herein. All such information and related graphics are provided "as is" without warranty of any kind. Microsoft and/or its respective suppliers hereby disclaim all warranties and conditions with regard to this information and related graphics, including all implied warranties and conditions of merchantability, fitness for a particular purpose, workmanlike effort, title and non-infringement. You specifically agree that in no event shall Microsoft and/or its suppliers be liable for any direct, indirect, punitive, incidental, special, consequential damages or any damages whatsoever including, without limitation, damages for loss of use, data or profits, arising out of or in any way connected with the use of or inability to use the information and related graphics contained herein, whether based on contract, tort, negligence, strict liability or otherwise, even if Microsoft or any of its suppliers has been advised of the possibility of damages.
Note This is a "FAST PUBLISH" article created directly from within the Microsoft support organization. The information contained herein is provided as-is in response to emerging issues. As a result of the speed in making it available, the materials may include typographical errors and may be revised at any time without notice. See Terms of Use for other considerations.

Properties

Article ID: 2494266 - Last Review: January 28, 2011 - Revision: 1.0
Keywords: 
kbcodefx kbinfo kbsurveynew kbnomt atdownload kbrapidpub KB2494266

Give Feedback

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com