Anyway to get postcodes to appear on a map?

Mark M · 21 Nov 2011 at 16:35

If I have a list of postcodes, is there anyway to get them to display on a map (google maps etc)? Ideally automatically but it wouldn't be the end of the world if I had to update each one manually I suppose.

Thanks

visibleman · 21 Nov 2011 at 19:13

If you've got the PAF/Postcode data with longs/lats then you could use markers or shape overlays on a Google Map (the JS is pretty straight forward). All depends how you want to display the data though.

arturski · 22 Nov 2011 at 09:26

yep this is definitely possible i have done this before using the geocoding feature of the googlemap api.

If you have some php etc experience you can definitely automate this either from a database or a csv or even a text file.

just search around in google that how I did it, however i was not able to find one good tutorial that covered everything i had to use several guides in order to make it work and understand it a bit.

heres a couple of helpful links to get you going, what you are looking for is being able to place multiple markers on the map based on your postcode list. the google bit will be done in javascript but if you want to automate it you will have to write some back end code.

http://www.tomanthony.co.uk/blog/geocoding-uk-postcodes-with-google-map-api/

http://tai-dev.blog.co.uk/2009/05/1...s-api-in-bulk-and-on-the-server-side-6104334/

http://www.sitelogic.co.uk/google-maps-uk-post-code/

I know it can look a bit daunting looking at this but the best way is to experiment.

What also helped me was looking at the source of some of the demo pages. looking at their Javascript files and playing around with them to get the best result.

Mark M · 22 Nov 2011 at 12:19

Thanks for the info but having no experience of php it certainly seems a bit daunting to me. I did find the below code on a website which allows you to put the postcodes directly into the code. Not sure if its 100% accurate but for what I need it will probably be close enough. Is there a way to incorporate a csv/text file into this method as you mention abouve?

Code:

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Geocoding Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
            type="text/javascript"></script> 
  </head> 
  <body onunload="GUnload()"> 
    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 
       var geocoder = new GClientGeocoder();
       var map = new GMap2(document.getElementById("map_canvas"));
       var i;

       var postcodes = [
          'SL59JH',
          'LU13TQ',
          'SR29TD',
          'DA75BQ',
          'EC1V9B'
        ];

       map.setCenter(new GLatLng(54.00, -3.00), 5);

       for (i = 0; i < postcodes.length; i++) {
          geocoder.getLatLng(postcodes[i] + ', UK', function (point) {         
             if (point) {
                map.addOverlay(new GMarker(point));
             }
          });
       }
    </script> 
  </body> 
</html>

GravyMonster · 22 Nov 2011 at 13:22

To incorporate a CSV or text file into this you'd either need to use PHP, which you've said you don't want to do, or make an AJAX request to a text file on your server, and return a JSON object full of your postcodes.

If you add jQuery to your page, this would be as simple as:

Code:

var geocoder = new GClientGeocoder();
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(54.00, -3.00), 5);
var i;

$.getJSON('url/to/postcodes.txt', function(jsonData) {
    $.each(jsonData.postCodes, function(key, val) {
            geocoder.getLatLng(val + ', UK', function (point) {         
                if (point) {
                    map.addOverlay(new GMarker(point));
                }
            });
        }
    });
});

In the postcodes.txt file:

Code:

{
    "postCodes": {
        0: "SL59JH",
        1: "LU13TQ"
    }
}

It may take a bit of tweaking as I've not tested that at all, hopefully it's enough to give you a gist.