Illustrate the radius and midpoint of pindrops on google maps using lines / shading

I have a php program that is functional, but I would like to improve the UI. At present, a series of pin-drops are positioned on the map using Latitude +Longitude. I can drag these dots around and change their Lat+Long. See image 1. In order to improve the UI, I want to be able to see the radius of each pin-drop that I have on Google maps, using shading. I want to be able to set the radius in "kilometeres" by editing your code. The midpoint between two pin-drops should be illustrated using a line. As I drag the pin-drops around, the radius shading and the midpoint line should move accordingly. See image 2. NB: There could be just one pin-drop on the screen, or there could be 30+ pin-drops on the screen at any time. So please ensure that your script can handle as many pins on screen as possible. NB2: All shading and lines should be somewhat transparent - so I can still read the city names and see the streets on the map. NB3: Code should be provided in a script file that I can link to in the page. So simply, if I want the radius and lines to appear on a particular webpage inside my php program, I just include the link to the script file in the PHP source code. NB4: [login to view URL] shows the locations the maps javascript is using to display the pin-drops, these are dynamic variables Let me know if you require any other resources from the page, ie. existing scripts etc.