Geocode accuracy with UK postcodes and Google APIs

Using the Google APIs is entirely painless so if I need a map in a web app that’s where I’ll start.

I had a list of hotels I wanted to display and instead of looking up the latitude and longitude of each of them by hand I thought I’d use the google.maps.ClientGeocoder functionality. A bit of quick, scruffy code later and it’s looking them all up and putting the markers on the map but not where I expected.

I discovered that the postcodes are being truncated in the search, cutting off the last two letters. This seriously degrades the accuracy of each marker’s placement and many of the markers ended up on top of each other. The reason is probably the cost to Google of licensing the data from the Post Office. Fair enough but I was most of the way to my solution. There’s a simple workaround, however, do your lookup through the Google Search API’s LocalSearch class and pull the lat and lng from that. Bonzer.

In the code below look for the reference to localSearch in the newMarker function.


<html>
<head>
    <script src=”http://www.google.com/jsapi?key=<<INSERT API KEY HERE>>”></script>
    <script type=”text/javascript”>
    google.load(”maps”, “2″,{”other_params”:”sensor=false”});
    google.load(”search”, “1″);
    </script>
    <script type=”text/javascript”>

    var map;
    function loadMap() {
      if (google.maps.BrowserIsCompatible()) {
        map = new google.maps.Map2(document.getElementById(”map”));
        var house = new google.maps.LatLng(52.742844, -0.406194);
        map.setCenter(house, 10);
        var marker = new google.maps.Marker(house, { title: “Venue” });
        map.addOverlay(marker);
        map.addControl(new google.maps.SmallMapControl());
        addBeds();
      }
    }
    function addBeds() {
        var ch = [ 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U' ];
        var name = [ 'The George Hotel', 'Bridge House', 'Dormy House', 'Mill House', 'Maycroft Cottage', 'The Wishing Well Inn', 'Willoughby Arms', 'The Royal Oak Inn', 'The Baskervilles Hotel', 'Lady Annes Hotel', 'The Garden House Hotel', 'The Crown Hotel', 'The Bull and Swan', 'The Griffin Inn', 'The Oak Inn', 'Rock Lodge', 'The Royal Oak Inn', 'Travelodge Hotel', 'The Dolphin Guest House', 'Lindsey Cottage' ];
        var address = [ 'PE9 2LB', 'PE10 0JT', 'PE10 9EZ', 'PE10 9BU', 'PE10 0RB', 'PE10 0AF', 'NG33 4RA', 'NG33', 'Baston', 'PE9 2LJ', 'PE9 2LP', 'PE9 2AG', 'Stamford', 'NG33 4JG', 'pe9 3pa', 'PE9 2RH', 'Duddington, Stamford', 'NG33 5JR', 'PE9 1QD', 'Uffington, Stamford' ];
        var base = “http://www.google.com/mapfiles/marker”;
        for (var i = 0; i < ch.length; ++i) {
            var icon = new google.maps.Icon(G_DEFAULT_ICON);
            icon.image = base + ch[i] + “.png”;
            newMarker(address[i], name[i], icon);
        }
    }
    function newMarker(address, name, icon) {
        // ref: http://www.tomanthony.co.uk/blog/geocoding-uk-postcodes-with-google-map-api/
        var localSearch = new GlocalSearch();
       
        localSearch.setSearchCompleteCallback(null, function() {   
            if (localSearch.results[0]) {
                var lat = localSearch.results[0].lat;
                var lng = localSearch.results[0].lng;
                console.info( address + ” = ” + lat + “, ” + lng );
                var point = new google.maps.LatLng( lat, lng );
                var marker = new google.maps.Marker(point, { icon: icon, title: name });
                map.addOverlay(marker);
            } else {
                console.warn( address + ” not found” );
            }
        });
       
        localSearch.execute( address + “, UK” );
    }
    google.setOnLoadCallback(loadMap);


</script>
</head>
<body onunload=”google.maps.Unload()”>
    <div id=”map” style=”width:300px; height:420px;”>Loading…</div>
</body>
</html>

Technorati Tags:

Advertisements

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s