This took some searching, but I found a free way of doing it. In this case I want to display UK Areas of Outstanding Natural Beauty (AONBs) in Cumbria on a Google map for a web app.
Getting the data
To get the AONB outlines head over to naturalengland.org.uk and click on data – specifically here. Choose ESRI Shape as the data format. This will download a .zip file – in there is magaonb.shp which is our shape file.
Selecting & Converting to KML
Get Quantum GIS – a fantastic free GIS program from http://www.qgis.org/. If you are not familiar with other GIS programs its a little daunting at first.
Go Layer -> Add Vector Layer, browse to your shape file extracted earlier.
Contents of shape file will be displayed. In my case I was only interested in Cumbrian AONBs so I had to just select those: Click Layer -> Toggle editing this will allow you to select the bits you want.
Use the select tool, I chose select by polygon to draw a polygon round the bits I wanted (right click or double tap to end selection):
Now your selected bits will get a yellow colour. Go Layer -> save selection as vector. Choose “KML” and select a location to save to. Choose “selected CRS”.
Here is the generated KML:
To give the polygons a fill on your google map simply change <Polystyle><fill>0</fill></polystyle> to <Polystyle><color>abff0000</color></polystyle> REMEMBER that in KML colours are specified backwards, i.e. ABGR for some reason.
Showing on a google map:
First thing this doesn’t work on localhost – your KML file needs to be hosted on the web somewhere as google will process it when its called. Stick it on your webserver and follow the many google code examples for showing KML on a map. Apologies there is no code, theres lots of examples out there! With a few extra tweeks and some marker data here is my finished map: