Parallel Lines and Google Maps v3

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.

Posted in Geekery, Google Maps, Hackery

Leave a Reply

Your email address will not be published. Required fields are marked *

*