Mile/Kilometer Markers for GMaps

This is an experiment to find mile and kilometer markers for any map type (even if there is no visual interface), but for now I have written a prototype to use the GMap v3 interface.

In the summers I like to run, up until recently I had always used the GMap Pedometer to log my runs. Last summer I started my own project to experiment with a lot of ideas floating in my head where I could log my own runs in an application that I wrote myself. One of the features I really like about the GMap Pedometer is that as you are creating your route, it shows distance markers at every kilometer or mile. This is something I wanted to do as well, and recently I got a chance to sit down an afternoon and write up the initial code. Over the last couple of nights I have written a generic class that can be used to find distance markers given any set of points that specifies a line and a GMap subclass that shows this in action using the GMaps API v3.

The biggest thing that took this mini project a long time to get started on is I didn't really know where to start with the math - I knew if I dug out some geometry books I could get the formulas together, but luckily I found out that somebody has already done the work for me and made a very nice Javascript library to do it. Chris Veness with his blog at had just the formulas I needed to get this done. His very useful library can be found at:

So here is the breakdown of my code and how you can use it.

There are right now two classes, one a generic class called DistanceMarkerPointsCalculator. Given a line represented by a series of LatLon's, it will calculate where distance markers should be along that line.. There are a few functions that the user of this class needs to know about. The first is addPoint. addPoint adds a LatLon (what Chris' class uses to perform geometric calculations) which represents a point on the line that you want the distance markers for. There is a second function loadLine that can be overridden if the user of this class is subclassing for a particular map type. loadLine takes what your internal representation of a line is and converts it to a series of LatLons. Each LatLon should be added to the class using addPoint. The third function the user of this class needs to know about is latLonToDistanceMarker. latLonToDistanceMarker can be overridden by the user of this class, its purpose is to take a LatLon which represents the point where a distance marker should be and converts it to something that the user can use. Once your line is loaded, the user then calls getDistanceMarkerPoints with the distance between markers - in kilometers. This function will call latLonToDistanceMarker, if it is overridden you can place your points on a map there, or if it is not overridden, getDistanceMarkerPoints will return an array of LatLons that can be used to plot the points.

What I have done is write a subclass of DistanceMarkerPointsCalculator called GMapsDistanceMarkers. The purpose of this class is to make DistanceMarkerPointsCalculator useful for v3 of the Google Maps API. It takes a Polyline, converts each LatLng to a LatLon, performs the calculation, and then in latLonToDistanceMarker, it adds a Marker onto the GMap being shown. This is only an example and can be modified to suit whatever needs you have, whether it be to do some non-visual calculations or whether it is to display points on a Microsoft or Yahoo based map.

This project is checked into GitHub at There is a working demonstration of the GMap subclass in action at: