Feed on

Google maps are fantastic!

You can add a map to your site showing the location of your business, holiday home or just a point of interest.
In the UK this is a bit awkward due to the fact that the Royal Mail have complete control over postcode date. I have not found a way of reliably and directly Converting UK postcodes to “Geo Codes” used in the Google Map API. I have found some tools that claim to do this but found them unreliable. If you want to build maps programatically links to a couple of sites are at the bottom of the page.

If you just want to manually add a google map to your website and point it at a UK location then read on:

The first thing you need to do is register for a Google account and get a API key:


Once you have your key you will be given some sample code which you can simply cut and paste into your page straight away. In fact, the code google provides is an entire page, so if you are new to Web Design, just paste it into a new page as it is, you can then play around with it while you figure out how it works!

Next you may want to add some controls to your map, like the Zoom and Satellite view below:

To add these controls this find the line:

  • map.setCenter(new GLatLng(37.4419, -122.1419), 13);

Right after this line insert the following two lines:

  • map.addControl(new GMapTypeControl());
  • map.addControl(new GLargeMapControl());

Now, at long last, how do you get the Geo Code for your UK location?

The only reliable method I have found of getting the code so far can be found here:


To use this you will have to find the place you want to map to. Unfortunately the map at mapstars shows Holland, so you will need to Zoom out, find your city and start zooming in again, a bit of a pain. You can use google map which is searchable by postcode to help you find your area, flipping between google map and the mapstarts site.

Once you have retrieved the geo codes from mapstars SWAP THEM AROUND IN YOUR CODE. I also knock some of the decimal points off. The Mapstar values I used in the map above were:

-0.08763313293457031, 51.506618940077324)

In the code I put:

GLatLng(51.5066,-0.0876), 13);

Note I swapped the codes beginning -0.08 and 51.5 around and took most of the Decimals off.

And thats it, a botched up way to add a Google Map to a UK site.

This method is ok if you want to update one or two UK Google Maps manually, but if you want to be able to do it programitally I think you will need your own post code data.

Other methods on doing this are discussed on these sites:

If you have a wordpress blog and want to add maps to it, as I have done here, try using the Adsense Deulux plug in. Although designed for Google Adsense, it can be used to hold almost any code snippet you want to re-use on your site, providing a convenient javaScript container.

If you want to embed YouTube video’s into your blog, you may find this useful:


Related Posts

  • Google your WordPress Blog
  • Find Keywords with Google Trends
  • What is the difference between web design and web development
  • Free Web Design Tutorials
  • RSS feed


    Comment by mapperz

    You can get the Postcode Longitude and Latitude using
    do the search “SW1A 2AA”

    it will centre the map with info window

    then click “link to page”

    the url shows the lat/lon

    use the second pair of values

    can be down with address information as well
    see for details

    this can also be converted into kml for either google earth or parsed with google maps.


    (Comments wont nest below this level)

    [...] When I browse the internet I often come across Google Maps that are integrated directly into a web site and have wondered how it’s done. Well I came across a great site setup for web developers called sitelogic.co.uk where the editor has posted an article on how to do this here. [...]

    (Comments wont nest below this level)
    Comment by Husken

    On Mapstars.com you can also find some help for geocoding (get latitude and longitude) polines and polygones. See for example:


    Rene Husken

    (Comments wont nest below this level)

    Sorry, the comment form is closed at this time.