Getting started with Bing Maps AJAX Control 7.0
Written by Harry Fairhead   
Sunday, 21 November 2010
Article Index
Getting started with Bing Maps AJAX Control 7.0
Working with objects
Using PushPins
Adding an Infobox
Page 2 of 4

Banner

 

All that is needed to complete the page is a Div with the correct ID and something to call the GetMap function and make everything happen:

<body onload="GetMap()">
 <div id='myMap' 
   style="position:relative; 
   width:600px; height:400px;">
 </div>
</body>

If you don't specify a height and width 400 by 600 is used by default.

The complete page is:

<!DOCTYPE etc >
 <html>
  <head>
  <meta http-equiv="Content-Type" 
    content="text/html; 
    charset=iso-8859-1">
  <title>Map Example</title>
  <script charset="UTF-8" 
   type="text/javascript" 
   src="http://ecn.dev.virtualearth.net/
       mapcontrol/mapcontrol.ashx?v=7.0">
  </script>
 
  <script type="text/javascript">
   var map;
   function GetMap(){
     map = new Microsoft.Maps.Map(
      document.getElementById("myMap"), 
      {credentials: "KEY"}
    );
   }
  </script>
 </head>
 <body onload="GetMap()">
  <div id='myMap' 
    style="position:relative; 
    width:600px; height:400px;">
  </div>
 </body>
</html>

If you load this page via a web server then you should see the default Bing map appear.

 

default


Objects, methods and properties

Although the map control looks as if it is a JScript function it really is a Javascript/DOM object. The map control has a range of methods and properties that you can use to work with it and there are a range of auxiliary objects which are designed to make it all easier.

If you are familiar with earlier versions of the Map object you need to know that the new version has far fewer methods. The idea is that instead of having lots of methods the new control has a few methods that accept complex objects as a parameter that specifies lots of settings.

For example, the  original map control's SetCenter method will move the map location to the specified latitude and longitude. The new V7 map control has a setView method which accepts a ViewOptions object which in turn has a center property that can be set to a Location object which specifies the center of the map.

The easiest way to make sure you understand this is via a simple example:

If you add a button to the web page:

<input id="Button1"
 type="button"
 value="button"
 onclick="Button1_onclick()"/>

and the following click event handler:

function Button1_onclick() 
{
 map.setView(
  {center: 
   new Microsoft.Maps.Location(55, -1.5) });
}

then clicking the button recentres the map on 55N, 1.5W. The Location object can also store an altitude which is set to zero if not specified in the constructor.

You can adjust all of the other viewing parameters using similar properties of the ViewOptions object  – just check the online documentation.

For example there is a zoom property which you set to a numeric zoom level. To try this out change the button's click event handler to read:

function Button1_onclick() 
{
 map.setView({
 center: 
  new Microsoft.Maps.Location(55, -1.5),
 zoom:5});
}

You can create a fully initialised ViewOptions object before you call setView - the difference is mostly cosmetic. You can also create Location objects and use them later. For example an alternative way to write the previous function is:

function Button1_onclick() 
{
 var Loc=
  new Microsoft.Maps.Location(55, -1.5);
 var viewOptions={center: Loc, zoom:5};
 map.setView( viewOptions);
}

First we create the Location object, then the viewOptions object and finally make use ot it in the setView call.

Notice that there are two types of object used in the new map control. The first just has properties and can be created using an object literal as you would create a JSON object say. The second has methods and these are supplied by the control and you have to create instances using the appropriate constructor. Compare the difference between the Location object and the viewOptions objects if you need an example.

 

Banner

<ASIN:0471790095>

<ASIN:0470236825>

<ASIN:0975841947>
Last Updated ( Monday, 22 November 2010 )