Jaa

Virtual Earth in UK websites

  • Artikkeli

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):

  1. 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).
  2. 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>

Comments

  • Anonymous
    June 21, 2007
    These are great features to have on a website but only if they are added with a use that searching users will find useful.  I am sure that the top websites with top webdesigners will make good use of these tools.

  • Anonymous
    August 11, 2008
    I'm trying to add a driving directions map to a small customer database app I'm building. I've got our office postcode and the customers postcode so I can dynamically insert the postcodes to view the driving directions to the customer. Is it possible to get the driving directions to actually appear on the page rather than a javascript popup as I'd like to be able to print the page with the map and directions. Hope you can help. Thanks.

  • Anonymous
    August 14, 2008
    My colleague Mike Ormond (http://blogs.msdn.com/mikeormond/) posted a reply to your question...but it seems to have disappeared into the aether. The essence of it was that you need to use a div rather than an alert. The alert is causing the popup. So create a div then build up a string using the results you get back from the GetDirections method. See http://msdn.microsoft.com/en-us/library/bb877838.aspx for more info on GetDirections. HTH, and thanks again to Mike.