Series of Tubes

Still working on a mapping project.  A section of the code involves drawing bounding boxes around various points of a Google Map polyline.

Reading up on the geometry involved I came across an excellent demo of the part of the problem domain: drawing parallel lines along a path.

The algorithm is pretty simple:

• Convert from a LatLng geopoint to a 2 dimensional point on the flat plane of the containing <div>
• Plot a point above and below the line by matching the slope of the current line and offsetting by a specified width
• Convert new points back to geopoints
• When entire line is parsed build two new overlays from the offset points and draw on the map

The demo was built for Google Maps version 2 which, while still functional, is now outdated.  I ported the code over to version 3 of Google Maps.  Links to the ported code are below.  Just like Bill’s original code it is of course free for any use.

• Demo
• Code