Insert a Virtual Earth Map in your asp.net page - Part 1

by Emanuele 6/19/2008 5:59:00 PM

To interface with Microsoft Virtual Earth we must use javascript, because the code and the controls to get the maps is client side.
With Microsoft Virtual Earth, we can see the map in much formats, but the thing that the others envy is the Bird View.
With Bird View we can see the road or the palace like a "bird" see it.

Insert the map

To see the map on own page, we create a div in html format:

<div id="VirtualMap" style="position:relative; width:600px; height:600px;"></div>

If we miss the position attribute the map is not viewed correctly.

After this, we put in the tag <head> the follow javascript script:

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

The parameter "v" is required and it is the version of the Virtual Earth Map Control.

Under the previous script we must put other script, that create the map control in the map container.

      <script type="text/javascript">
         var map = null;

         var StartPoint = new VELatLong(45.39844997630408, 10.546875000000014);

         var pinPoint = null;
         var pinPixel = null;

         function GetMap()
         {
            map = new VEMap('VirtualMap');
            map.LoadMap(StartPoint, 4, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 4);
         }

         function getInfo()
         {
            var center = map.GetCenter();

            info = "Zoom level:\t" + map.GetZoomLevel() + "\n";
            info += "Latitude:\t"   + center.Latitude    + "\n";
            info += "Longitude:\t" + center.Longitude;

            alert(info);
         }
      </script>

Replace the tag body with this tag: <body onload="GetMap();">

We can change all parameters in the function LoadMap.
The StartPoint class is the coordinates where the map starts when is loaded.
The second parameter is the zoom level: 1 to 19.
The third parameter is the style of the map. (Road,Aerial,Hybrid,Oblique,Birdseye,BirdseyeHybrid)
The fourth parameter indicates if the user can navigate in the map or not.
The fifth parameter is the visualization mode of the map. (2D,3D).
The sixth parameter is the boolen that indicates if the navigation control are visible or not.
The seventh parameter is the number of "square" that the control map load until you navigate on the map.

Follow this instructions and view the page on your browser.