We recently just announced the latest Bing Maps Ajax Control v7.  I wanted to start with some simple “Hello World” samples to help get you started developing with v7. 

First, you must go the Bing Maps Account Center and sign up for a free developer account and get a Bing Maps Key.  You will use this key as credentials for Bing Maps applications you develop.

Once you have a developer key, create a simple HTML file with the following content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Bing Maps Ajax Control v7 - Hello World Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<script type="text/javascript">
function createMap()
{
   var mapOptions = { credentials:"<Insert Your Bing Maps Key Here>" }
   var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions );
}
</script>
</head>

<body onload="createMap();">
<div id='mapDiv' style="position:absolute; width:800px; height:600px;"></div>
</body>
</html>

First you must include the source to the v7 map control by including a reference to the Bing Maps v7 source. 

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

Then, create a div in the page to host the map.  For this sample, we set the map to 800 x 600 pixels by setting the style of the div.

<div id='mapDiv' style="position:absolute; width:800px; height:600px;"></div>

Then, instantiate the Map object in the div with the following script. Insert your Bing Maps Key from above for the credentials property of the map options.

   var mapOptions = { credentials:"<Insert Your Bing Maps Key Here>" }
   var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions );

When loading this page, you will see the following map.  Click the image or link below to load the sample:

Bing Maps Ajax Control v7 Hello World Sample 1

Bing Maps Ajax Control v7 – Hello World Sample 1

Notice by default the Map appears with the “Automatic “ map style.  You can change the initial map view by setting some additional properties in the map options.  For example, the following code will load the map in Road style zoomed in at a location by setting the mapTypeId, center, and zoom properties:

var mapOptions = 
{
      credentials:"<Insert Your Bing Maps Key Here>" ,
      mapTypeId:Microsoft.Maps.MapTypeId.road,
      center: new Microsoft.Maps.Location(37.77637, -122.42212),
      zoom: 13
}

var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions );

When loading the map with these options, you will see the following map.  Click the image or link below to load the sample:

Bing Maps Ajax Control v7 Hello World Sample 2

Bing Maps Ajax Control v7 – Hello World Sample 2

Here’s another sample, where the map is loaded in Birdseye at a particular location with the label overlay turned off:

var mapOptions = 
{
      credentials:"<Insert Your Bing Maps Key Here>",
      mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
      center: new Microsoft.Maps.Location(37.794973,-122.393542),
      zoom: 17,
      labelOverlay: Microsoft.Maps.LabelOverlay.hidden
}
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions );

Bing Maps Ajax Control v7 Hello World Sample 3 

Bing Maps Ajax Control v7 – Hello World Sample 3

For more information on developing with v7 map control, see the Bing Maps Ajax Control v7 SDK.