Putting GPS Tracks into Google Maps
After watching a recent episode of Hak5, which showcased Google Maps GPS Mashups, I was inspired to finally do something with some of my own GPS data. I had GPS data from a canoe trip taken last year and a road trip from a few years ago stored on my handheld GPS with which I had always planned to do something, but just hadn’t had the motivation until now. While a little simpler than the project described on the show, my initial goal was to draw the GPS track data in Google Maps annotated with waypoints drawn as map markers. The markers would be used to mark specific locations with descriptive text and images.
Preparing the Data
Before I could actually add any of the GPS data to a map, I had to transfer it from by old Garmin GPSMAP 76. Since I didn’t have the software to perform the transfer, I decided to ask GOOG for free GPS software recommendations. After trying GPSMan for Linux, which worked but shifted the times on my GPS points by twelve hours for some reason, and reviewing a procedure for installing Garmin MapSource without the original installation media, I decided on EasyGPS for Windows.
EasyGPS allowed me to copy the data from my GPS a GPX file on my PC, and edit the files to add waypoints that would display as markers in Google Maps. Then it was time to add the data to a map.
Adding Data to the Map
This initial GPX Loader loads the trkpt elements from the specified GPX file into a GPolyline overlay object for the specified GMap2 object. The trkpt elements are connected to form a line with a specified width and color. The map is centered around the track and applies the specified zoom level, or automatically determines an appropriate zoom level if a value of -1 is specified. An info bubble is optionally placed at the position of the first track point if an info message is provided. This was a good start, but there was still much work to be done.
The next step for the project was the addition of support for GPX waypoint elements. This was fairly straight forward, with a GMarker created at the position of each waypoint. An info bubble is attached to each waypoint element containing name or description sub-elements. The name element, if specified, is used to create a title for the info buble, rendered as an H1 HTML heading. The description element is used to specify the body of the message for the info bubble. The info bubbles are setup to be displayed when its associated map marker is clicked.
Once waypoint support was complete, support for multiple track styles was added to allow the visual representation of the "connectedness" of a track. Each GPX file contains one or more track elements. These track elements are composed of one ore more track segment sub-elements. The track segment elements contain track point elements. It is the track points that provide the actual GPS coordinates. Styles were added to draw a continuous line where all track points are connected, a split line where all points in a track are connected but the tracks themselves are not connected, and a segmented line where all points in a track segment are connected but the track segments are not connected.
Because a new track is created whenever the GPS is turned on and off, and new track segments seem to be created whenever the GPS loses and acquires a satellite signal, the inclusion of the split and segmented line styles allows the map to show periods of satellite signal loss and times when the GPS was turned off, which could indicate a stopping point on an extended trip.
At this point, all of the planned functionality for the project was complete. All that was left was to add of some waypoints to my GPX files and to clean the code up for general purpose use.
For my trip maps, I had all of the GPS track data that I needed, but did not actually have any waypoints to display. I had not actually created any waypoints on either of my trips and wanted to create a few custom waypoints to mark significant locations from the trips. During the course of the road trip, we had stopped at the highest points in five of the states through which we had crossed and I wanted to create a waypoint to mark the location of each of these high points. I used EasyGPS to create the waypoints and, with a little additional editing with Notepad++ to get past limit EasyGPS places on the length of a waypoint name, I had waypoints placed at the appropriate positions with names to match their associated high points and descriptions complete with location information, elevation, and photographs.
With the data from the canoe trip I wanted to mark the first and last point from each day of a seven day trip. While I could have searched through the GPS file manually looking for the start and end points of each day, I decided instead to write a little Python script to perform this task for me. The script loads all of the tracks from a GPX file, extracts the first and last point of each track, compares their times to find the first and last points of each day, and then writes GPX waypoint data for each point to the console for cutting and pasting into the GPX file. Each waypoint contains its associated day number within its name, and position and time as its description:
Once this was done, it was time to reorganize the code.
Cleaning up the Code
Things were looking pretty good, but there was still one thing that I thought was missing.
Creating a Custom Track Style Control
As soon as the GpxTrack object was done, at which point the project should have been complete, I started to feel the urge to create a custom Google Maps control capable of changing a GpxTrack object's track draw style. This turned out to be fairly simple and really only involved the creation of a GpxTrackStyleControl object, which inherited from the GControl object of the Google Maps API, to draw a few buttons on a map which change an associated GpxTrack object's track draw style when clicked:
My work with the Google Maps API was complete (for now), and my maps were ready for publication.
Putting the Maps Online
Since I am currently using Drupal to manage my site, I needed to find a way to embed my Google Maps within Drupal. Again I asked GOOG for advice and found the answer in a blog posting. The answer, essentially, was to use the 'drupal_set_html_head' function. Knowing this I created two separate files, one to create my maps, and the other to embed them within Drupal:
Once the maps were published I was ready to move on to my next idea for creating KML/KMZ files containing data from GPX files bundled with photographs as placemarks located at the approximate position at which they were taken for display in Google Earth, to be described by a future post.