Google Maps Widgets from Bill Chadwick - * Updated Feb 2012 *
Here is a collection of links to my Demos and Scripts for use with Google Maps V2 and now V3. The V2 scripts should all work with Firefox 3 and MSIE 7. Most work with Opera. Some work with Chrome. The V3 scripts should work in most browsers except perhaps, Opera.
You are visitor


These are a very simple coloured block marker with a tooltip. They have no events or opacity control (but these could be added). The point of these is that for the same load time, you should be able to use more of these on a map than you can GMarkers.

The demo adds a few hundred blocks which will separate if you zoom in. The demo blocks are coloured with all the colours of the rainbow. Their tooltip is their wavelength in nanometers.

Source code for the Block Marker is here. Source code for converting a number between 0 and 1 into a HTML colour string between violet and red is here.
GRATICULES & RINGS * Updated 20 Jan 08 *

There are three basic types. A Latitude and Longitude Graticule, a UK National Grid Graticule and Range Rings.

Range Ring spacing is automatic, fixed or from an array. Rings are labeled every 45 degrees. Accuracy is about 200m in 140km or 20m in 14km at UK latitudes.

The Lat/Lon graticule uses HTML divs for its lines and is quick to paint. The UK graticule and Range Rings use GPolylines and are fairly slow to paint so are coded to only paint after map panning / zooming has finished (using the map's moveend event).

Both graticules have tooltips on the labels. Google Maps uses the WGS84 datum so the labels on the lat/lon graticule reflect this. The Lat/Lon graticule can use decimal or sexagacimal (DMS) spacing according to a constructor parameter. The colour for the graticules is the Map's default text colour so will change between Map and Satellite views.

In this demo, the map's mousepointer position is shown as OSGB 1936 Lat Lon, UKOS Eastings and Northings (metres) and UKOS grid reference. Custom controls are used for the demo's Grid Type and Map Cursor displays.

Source code for the Lat/Lon Graticule is here. Source code for the Lat/Lon to UK OS conversion is here. Source code for the UK OS Graticule (requires LatLngToOSGB.js) is here. Source code for the Range Rings is here. Usage is as simple as map.addOverlay(new LatLonGraticule());

New ! Ports of the UK and WGS84 Lat/Lon Graticules for the V3 Maps API are now available.


This small simple arrow was my first VML/SVG overlay. These arrows are great for showing a track (perhaps from a GPS) or perhaps you could use them for showing wind direction. Currently the arrows are a fixed size. The code could be modified to create variable length arrows with different head sizes. The arrows have a tooltip and can be clicked on. They work in Chrome.

The demo just displays four arrows indicating North, East, South and West. The actual heading of the arrow is given in compass degrees.

Source code for the Arrow Marker is here. This should work in any VML or SVG enabled browser. For SVG browsers other than Firefox you may have to use include var _mSvgForced = true; and var _mSvgEnabled = true; in the begining of your map script.
New ! A Port of the Arrow overlay for the V3 Maps API is now available.

This uses sub-classing on GMarker to provide a marker that can be dragged from its spot but leaves a line indicating its actual reference point. The resulting offset is independant of zoom level.

This lets the user deal with overlapping markers in a natural way. By default, the line is drawn in the current map's default text colour but colour, weight and opacity can be supplied to the constructor.
To add a new marker, click on the map. The marker offset is cleared with a double click.

Source code for the Offsetable Marker is here.

This is a scaled circle overlay using SVG/VML. Radius is give in kilometers - use the UKOS grid to check. The line (stroke) of the circle can have a selected colour, pixel width (weight) and opacity. The fill of the circle can have a selected colour and opacity.

The circle provides mouseover, mouseout and click events. Unfilled circles only register mouse events on their line. The stroke could be dashed using the method in the subclassed Polyline below. The demo changes colours and opacity etc. as you mouseover the circles. On Chrome, mouseout and mouseover and the tooltip do not work properly.

To use a colour and/or opacity gradient use an Array of 2 colours and/or 2 opacities for the fillColor and fillOpacity properties. Currently Firefox struggles to paint circles with radius > 3000 pixels. This is despite all attempts and using a scale transform. For now, circles this big don't plot on Firefox.

Source code for the Circle Overlay is here. This should work in any VML or SVG enabled browser. For SVG browsers other than Firefox you may have to use include var _mSvgForced = true; and var _mSvgEnabled = true; in the begining of your map script.

These use a subclassing of GPolyline and GPolygon respectively. They work on MSIE and Frefox, but currently not on Opera or Chrome. The subclassing adds:

- Click, Mouseover and Mouseout events
- Dashed line/stroke styling
- A Tooltip or Title.

On Firefox (not IE), the bounding rectangle of the polyline seems to occlude earlier added polylines from receiving mouse events (despite setting the 'pointer-events' attribute). You will observe this with the dashed red line in the demo. Also with Firefox the undashed parts of the stroke don't respond to the mouse.

Source code (updated Jul 09) for the Polyline is here and for the Polygon here. These should work in any VML or SVG enabled browser. For SVG browsers other than Firefox you may have to use include var _mSvgForced = true; and var _mSvgEnabled = true; in the begining of your map script.

This uses some 3D geometry maths to work out the distance between the mousepointer's lat/lng and a GPolyline (or border of a GPolygon). The distance in metres is displayed in a panel on the bottom right of the map.

You can test this by panning the map so that a vertex of the polyline lies on one end of the scale bar and then moving the mousepointer to the other end of the scale bar. Also, if you zoom well in, then the distance should stay around 1m or less as you move the mousepointer all along the polyline. The test polyline has horizontal and vertical sides of 2km so the furthest away you can get inside its square is 1000m.

Source code for the distance calculation is here here

This code can be used for determining how far 'Off Route' a point is or for filtering 'Points Of Interest' for proximity to a route. I have used it with the GSHHS data set to find out how far it is to the sea.

There is a similar, better demo here

For a demo of how to draw parallel Polylines please see


For a demo of how to draw Polylines with direction arrows please see


For a demo of how to use Google Spreadsheets as a read/write data source for a map please see


For a detailed instructions of how to easily make your own custom maps for use with the Google Maps API, please see