This post contains an easy example of use of Virtual Earth for basic location services. With the following code, you will be able

·         to put a flag on a location

·         to add information about the flagged place

·         to generate direction information to reach the flagged location from any given starting place 

VE 

 

Here below, the simple code you need. For additional information, please go to the Windows Live Developer Center.

 

 

<html>

   <head>

      <title>Your Title</title>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>

      <script>

     

      var map = null;

     

      function initialize()

      {

        GetMap();

        myHome();

      }

     

      // To display a pin and to configure the related popup windows

      function myHome()

      {

        var pin = new VEPushpin(1, map.GetCenter(), null, 'Here is where I live...',

            '<table>' +

                '<tr>' +

                          '<td>' +

                                 '<ul>' +

                                       '<li>My Address</li>'+

                                       '<li>My City</li>' +

                                       '<li>My Email</li>' +

                                 '</ul>' +

                                 '<ul>' +

                                     '<img src="images/My Image.jpg">' +

                                 '</ul>' +

                          '</td>' +

                   '</tr>' +

            '</table>');

        map.AddPushpin(pin);

      }   

          

      // To center the map on your location enter the correct coordinates (

      // XXX, YYY below – Should be something like 47.nnnn, 8.nnnn)

      function GetMap()

      {

 

              // VEMap Class

 

         map = new VEMap('My Map');

 

// VEMap.LoadMap(VELatLong, zoom, style, fixed, mode, showSwitch);

//

//   VELatLong: A VELatLong Class object that represents the center of the

//              map. Optional.

//   Zoom: The zoom level to display. Valid values range from 1 through 19.

//         Optional. Default is 4.

//   Style: The map style. Valid values are a for aerial, h for hybrid, o for

//          oblique (bird's eye), and r for road. Optional. Default is r.

//   Fixed: A Boolean value that specifies whether the map view is displayed

//          as a fixed map that the user cannot change. Optional. Default is

//          false.

//   Mode: A VEMapMode Enumeration value that specifies whether to load the

//         map in 2D or 3D mode. Optional. Default is VEMapMode.Mode2D.

//   showSwitch: A Boolean value that specifies whether to show the map mode

//               switch on the dashboard control. Optional. Default is true

//               (the switch is displayed).

 

         map.LoadMap(new VELatLong(XXX,YYY), 15 ,'r' , false, VEMapMode.Mode3D, true);

      }  

     

      // To draw direction information from the location entered in the textbox ()

      function Button1_onclick() {

 

// VEMap.GetRoute(start, end, units, route_type, callback);

//

//   start: The start location. This can be a string value of an address, a

//          place name, or a VELatLong Class object that specifies the start

//          location

//   end: The ending location. This can be a string value of an address, a

//        place name, or a VELatLong Class object that specifies the end

//        location

//   units: A VEDistanceUnit Enumeration value that specifies either miles or

//          kilometers. Optional. Default is VEDistanceUnit.Miles

//   route_type: A VERouteType Enumeration value specifying either the

//               shortest route or the quickest route. Optional. Default is

//               VERouteType.Shortest

//   callback: Specifies the function to call when the VERoute Class object

//             is returned – See next function

 

        map.GetRoute(Text1.value, new VELatLong(XXX,YYY), VEDistanceUnit.Kilometers,

                     VERouteType.Quickest, onGotRoute);

      }

     

      // This code generates the routing information (

      function onGotRoute(route)

      {

           var routeinfo="Route info:\n\n";

           routeinfo += "Total distance: ";

           routeinfo += route.Itinerary.Distance+" ";

           routeinfo += route.Itinerary.DistanceUnit+"\n";

           var steps="";

           var len = route.Itinerary.Segments.length;

           for(var i = 0; i<len ;i++)

           {

              steps+=route.Itinerary.Segments[i].Instruction+" -- (";

              steps+=route.Itinerary.Segments[i].Distance+") ";

              steps+=route.Itinerary.DistanceUnit+"\n";

           }

           routeinfo += "Steps:\n"+steps;

           TextArea1.value = routeinfo;

           TextArea1.style.visibility='visible';

      }

 

   </script>

   </head>

   <body onload="initialize();">

        <table style="width: 600px">

            <tr>

                <td style="width: 600px; height: 450px">

                    <div id='My Map' style="position:relative; width:600px; height:400px;">

                    </div>

                    <input id="Button1" type="button" value="Give directions from"

                           onclick="return Button1_onclick()" style="width: 195px" />

                    <input id="Text1" type="text"

                           value="Bahnhofstr.1, 8000 Zurich, Switzerland"

                           style="width: 400px" />

                </td>

            </tr>

            <tr>

                <td style="width: 600px; height: 39px">

                   <textarea id="TextArea1" style="width: 599px; height: 153px; visibility:

                             hidden;" onclick="return TextArea1_onclick()"></textarea>

                </td>

            </tr>

        </table>

       <br />

       <br />

   </body>

</html>