Course Map using the Google Maps API

Inspired by this site, I created a map of the Pumpkin Run course using the newly released Google Maps API.

Here is the link to the map: http://pumpkin.runningland.com/map/. It shows a satellite Google Map view of the Pumpkin Run course and draws a line along the trail little by little from start to finish.

Read on to see how I did it.

First, I ran (slowly) around the course with my GPS in my hand, making sure that the device’s tracklog feature was turned on. There were only a couple places where the tree cover caused reception problems. You can also see a couple jagged lines where the GPS took some fairly inaccurate readings. It would be interesting to get an antenna for my GPS and do the course again and see if the reception is any better.

Next I hooked the GPS up to my computer and used a program called GPSBabel to pull the tracklog off the device and into a format that is usable with the Google Maps API. Then I uploaded the tracklog to my web server. Next I downloaded the source code from the particletree site and modified it heavily to work with my site and data.

I had previously signed up for a Google Maps API key to be used anywhere below the http://pumpkin.runningland.com/map/ URL. I plugged in my key and made some modifications to integrate it into the Pumpkin Run web site. I modified the zoom level to be more appropriate for the course (the guy at particletree was cycling and therefore covering more distance).

I got it working pretty quickly in Firefox, however, I got some strange errors in IE. I added some text to the tag and added a definition into the CSS file and the problem cleared up in IE. It now works fine in Firefox and IE.

I think this is a nice addition to the Pumpkin Run web site – any would-be registrant can view the exact course before signing up. If you’d like something similar on your web site, feel free to contact me.