GPX Viewer


The GPX file viewer script can display GPS data in a Google Map. This Google Maps Mashup is written entirely in Javascript and is all client-side scripted. The advantage of this is that it requires no server side scripting. You simply copy some files to your web server and add some content to your web page.

Update 2007/07/31:I have made a Google Code project to host this script. Click here for more details.

Update:Version 4 upgraded to Google Maps API v2.

The GPS data must be in the form of a GPX file. This is an XML based GPS data file format that is supported by many tools. It is nice because it can be used without modification (though size can be a concern if you have a lot of track points). Some information about the tools can be found here.

Since the whole point of this project was originally to show GeoTagged photos, I extended the GPX file format slightly. If a waypoint tag <wpt> contains an <html> within an <extensions> tag then the contents of that tag are inserted in the popup indicator for that map point. In the example below I created a few extra <wpt> tags with just a single image and link embeded in the html. It could, however, contain any html code you wanted.

Note that the code must now be contained with a CDATA element to keep its contents from being parsed by the XML parser. This was needed to get this working in Mozilla/Firefox since they don’t have the .xml property that I was previously using.

Here is an example…

How to use it in your own web page
Here I will give a step by step intro on how to use this script to add a Google Map of your GPS data to any web page.

1. The first thing you need is a GPX file. Many of the GPS tools that I have used support this file format. The WWMX TrackDownload tool only outputs GPX files. You can convert the data from other formats using tools like GPS Babel or online at GPS Visualizer. Due to the way that servers and browsers communicate the type of a file, you will find it much easier of you change the name of the file to end in .xml instead of .gpx.

2. The HTML code for embedding a google map is pretty simple. There is an excellent example at Google called The Hello World of Google Maps. This is a good place to start.

3. Download the Javascript code loadgpx.4.js and save it in the same folder as your web page.

4. The next thing you need to do is modify your google map page to include the file above. Add the following line somewhere in your <head> tag

<script src="loadgpx.4.js" type="text/javascript"></script>

5. Now you can start using the script functions in your own Javascript to load the gpx file and add the track points to the map.

See the Google Maps API Reference for using asynchronous XML for more information on how to dynamically load the XML.

Until I have a real reference page the best thing to do at this point is give an example of how to use the GPXParser object defined in loadgpx.4.js.

Right click on the example below to view the source and see how that page was made.

Examples
Below is a view of this file. It is a GPX file that has been renamed to a .xml extension (needed to convince the browser that it is, in fact, xml). Here is the actual HTML page if you want to view the source http://okuda.ca/googlemaps/gpxviewer.html.

Below this is link to another example using the same script but a different GPX file. This one shows what happens if a waypoint does not have an html tag within it. This file is still quite large so it can take some time to download.

Gold Coast to Great Barrier Reef

Revision History

  • revision 1 – Initial implementation
  • revision 2 – Removed LoadGPXFileIntoGoogleMap and made it the callers responsibility. Added more options (colour, width, delta).
  • revision 3 – Waypoint parsing now compatible with Firefox.
  • revision 4 – Upgraded to Google Maps API version 2. Tried changing the way that the map calculated the way the center and zoom level, but GMAP API 2 requires that you center and zoom the map first. I have left the bounding box calculations commented out in case they might come in handy in the future.

CC-GNU GPL
This software is licensed under the CC-GNU GPL.