Virtual Earth in UK websites

Article
06/21/2007

I've just noticed that the NHS are now using Virtual Earth for their "find a service" feature that lets you find NHS doctors, dentists etc. Also of course Tesco are using it for their store locator, and Rightmove are using it as their mapping service.

It's good to see some major UK brands using Virtual Earth and I think it's a testament to two things (well, at least two):

The developer APIs for this service are incredibly easy to use. Take a look at http://dev.live.com/virtualearth/ for an overview. The interactive SDK is particularly cool, it shows you mapping features then provides the source code for you to copy and paste directly into your webpage to achieve the same effect (more on this below).
Trust in the service. Not only from a reliability point of view, but also from a business relationship point of view. Obviously all of these three organisations are using the commercial service which gives them service level agreements etc that you won't get if you're using the free service. But the very fact that they have that option is, in my view, a really positive thing.

All of which implies that Virtual Earth is a useful service to get to know if you're a developer.

I wanted to finish with an example of just how easy it is to incorporate this stuff into your site for people who haven't tried this sort of thing yet. I visited the interactive SDK and looked at the "Get a route and directions / show directions" link. I then simply copied the code shown, changed the from and to addresses to be from the Microsoft campus in Reading (postcode RG6 1WG) to the Millenium Stadium in Wales. I pasted the code into Notepad and saved as "ianmap.html". That's it, I have a web page that shows driving directions from RG6 1WG to the Millennium Stadium.

Although this is a trivial example, it's pretty easy to see how you could customise it further, and in fact it's fairly easy to see how the NHS could have built their mapping solution pretty quickly. Oh and PS: switch to 3D view to see the Millennium Stadium, and the rest of Cardiff, modelled in 3D.

Here's the code I used. The only bit I changed was the "from" and "to" addresses in the GetRoute method:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <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 GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap();

            map.GetRoute('RG6 1WG, United Kingdom',
                     'Millennium Stadium (stadium), Wales, United Kingdom',
                     null,
                     null,
                     onGotRoute);
         }
         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;
            alert(routeinfo);
         }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
   </body>
</html>

Virtual Earth in UK websites

Additional resources