Virtual Earth – Finding a Postcode


I'm a big fan of Virtual Earth and often try and sneak it into demos as many people seem unaware of its existence or unaware of just how good it is. A common question I get is "Do I need to use lat / lon or can I plot a postcode?". Absolutely you can plot a postcode - the big advantage of having lat / lon is being able to pin point *exactly* where something is (and probably a little less overhead).


Here's an HTML page that uses the Virtual Earth map control to plot the location of the Microsoft Reading office postcode (RG6 1WG). You can just cut and paste the below into an HTML document to see it working. Note the reference to v6.1 of the map control script and the use of a callback on map.Find() to plot the pushpin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

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

function GetMap() {
map = new VEMap('myMap');
map.LoadMap();
FindLoc();
}

function FindLoc() {
try {
map.Find(null, 'RG6 1WG', null, null, null, null, null, null, false, true, LocFound);
}
catch (e) {
alert(e.message);
}
}

function LocFound() {
var pPin = map.AddPushpin(map.GetCenter());
}
</script>

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


[UPDATE]


As Graham points out in the comments on this post, the above code will momentarily show the default map before displaying the postcode. To avoid this you have a couple of options, one is to hide the map until you're ready to display it. Here's a modified snippet of the above code that would achieve that:

    function LocFound() {
var pPin = map.AddPushpin(map.GetCenter());
document.getElementById('myMap').style.visibility = 'visible';
}
</script>

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


All I've done is changed 'myMap' to be hidden by default and added a line of code to the LocFound() method to make it visible when we've got the postcode location and are ready to display the map.


image


Loading the above HTML document in a browser will result in something similar to that on the left (click the image to see full size).


You might also want to take a look at the Vista Gadget I created some time ago which will take a location (including a postcode) or a route and plot it on a "flyout" Virtual Earth map. You can download it and pull the script apart to see how it works.


 


Technorati Tags: ,

Comments (9)
  1. Hi Mike,

    I agree – so many devs I come across, see VE and say is that "google maps" which is frustrating!  And then *they* get frustrated with the lack of IDE support and having to write JavaScript

    Of course the VEJS project on codeplex can help with the intellisense JavaScript support in VS: http://codeplex.com/VEJS, or even better the VIEWS project (Virtual Earth Wrapper for Silverlight http://www.codeplex.com/views) lets you write managed code in Silverlight to control the map.

    The forthcoming Silverlight control will definitely widen it’s profile further and I believe there is one for asp.net too, which would be great to see.

    Cheers

    Ian

  2. Graham Russell says:

    Hi Mike,

    This works a treat but every time I view the page the maps defaults to America, and then re-navigates to the Post Code.

    Is there anyway of using the LoadMap method to go directly to the PostCode?  I’m assuming not as we need to Find the coordinates.

    Just a thought…

    Graham

  3. MikeO [MSFT] says:

    Hiya Graham. There’s a couple of ways you can deal with this. Either use CSS to hide the map div until you have it centred where you want or specify a generic UK lat / lon in the LoadMap() method. You’ll then see a map of the UK first before zooming / panning to the specific postcode. Mike

  4. MikeO [MSFT] says:

    Hi Ian. Yes, the VEJS stuff is incredibly useful. Haven’t looked at VIEWS yes but will do now… :-). Thanks, Mike

  5. These days, it’s not so much email as RSS that causes the delays when I get back from leave. Here’s a

  6. Interesting stuff from the past few days

  7. Hi Mike,

    We have had a bit of fun with VIEWS creating "The amazing album cover atlas" here: http://theamazingalbumcoveratlas.org/

    Source is here:

    http://shrinkster.com/10io

    Cheers

    Ian

  8. Of course, once you’ve found one postcode , you find yourself a reason to find lots of them as Ashley

Comments are closed.

Skip to main content