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
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 :
- 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;" />
- 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>
- 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();"> - 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:
| Language | Project Name |
|---|---|
| Visual C# | CSASPNETBingMaps |
| Visual Basic.NET | VASPNETBingMaps |
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.