The all-new Bing Maps Ajax API  is faster and more efficient - but it is has a different interface and isn't backward compatible. If you want to get started using it - read on.

The latest Bing Maps Ajax control  is quite a lot different from the earlier versions. It is substantially reduced in functionality and it has been reorganised and generally cleaned up. This is a problem because it isn't backwards compatible but if you are prepared to make some changes to your code the reward is that it is substantially smaller and faster in operation. Read on if you want a quick overview of how it all works including a few advanced topics.

If you want to get started with Bing Maps then you can either use an Ajax Javascript control, which is a really good example of the Spartan approach to creating web pages, or you can use the latest Silverlight control.

This article is about using the Ajax Bing Maps V7.0 control.

If you have implemented a Virtual Earth application in the past it is also important to know that the older Javascript controls have been phased out. Versions 2 through 5 were phased out in September 2008. Version 6.1 is backward compatible with version 5 and manually upgrading to version 6.2 isn’t difficult. However version 7.0 is completely new and it isn't backwards compatible with version 6.2. It is worth converting your existing code however because it is much more efficient.

You can find out more at:

http://www.microsoft.com/maps/

Getting started

You don't need to download anything to get started but you do need a web development environment. If you already have a web site and the necessary tools you can just use them. If not then you could download Visual Web Developer 2008 or 2010 from the Microsoft website - it's free and comes complete with a web server which you can use to try things out.

A change since the days of Virtual Earth is that you now have to register and obtain a key to use Bing Maps. This isn't a big problem. All you have to do is visit https://www.bingmapsportal.com/ and set up an account or sign in with your Live ID. You will need to supply the name of your proposed application and the URL it will be hosted from.

At the moment neither of these pieces of information are used to tie the key to the site or application, but this might change in the future. You can register up to five applications and sites for free, i.e. you have five keys.

Your first map-enabled web page

Assuming you have your key and your development environment ready to go creating your first map enabled web page is easy. If you are using Visual Web Developer start a new Empty Web site and add an HTML page. You can view the page by right-clicking on it and selecting View in Browser - (this is quicker than using the Run command).

The whole principle of using the Map control is that you load a Javascript library which you then use to create and manipulate the Map control.

Every page that uses the Map control has to load:

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

Now that we have the Map control script we can start to make use of it.

The new  map control has a single new constructor Map. This accepts a two parameters the first specifies the ID of the HTML object that will be used to display the map. The second is a MapOptions object which you use to specify how the map should be initialised. In many cases you simply use this to specify your Bing Maps Key.

Thus most Bing Maps applications start off in the same way:

<script type="text/javascript">
 var map;
 function GetMap(){
  map = new Microsoft.Maps.Map(
   document.getElementById("myMap"), 
    {credentials: "YOUR BING MAPS KEY"});
 }
</script>

This creates a global variable "map" and when GetMap is executed this is set to an instance of the Map object created so as to display inside the HTML object with Id "myMap". Notice that you can no longer just use the Id you have to specify the Node in the DOM to be used as the map container. The second parameter sets the Bing Maps Key using an object literal . There are many other properties that you can set as well as credentials. If you are used to earlier versions then you might notice that the is no need to use a map load method - simply creating the map object causes it to load and display.

Everything that the Map control creates is added as children of the specified node used as the map container. In most cases the HTML object used is a Div but this isn't essential. The Map control is also usually created as a global object so that all of the script can access it.

<ASIN:1593272715.

<ASIN:0672329654>

<ASIN:0596101619>

<ASIN:1430216204>