The GPX file viewer script can display GPS data in a Google Map. It is written entirely in client-side Javascript and requires no server side scripting. You simply copy some files to your web server and add some content to your web page.
The code is hosted on GitHub.
Update: Upgraded to Google Maps API v3.
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 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 tools and GPSes export this file format directly. 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. Here is a simple example.
3. Download the code gpxviewer-master.zip and save the file loadgpx.js in the same folder as your web page.
4. Modify your google map page to include the file above. Add the following line somewhere in your <head> tag
<script src="loadgpx.js" type="text/javascript"></script>5. Use the script functions in your own Javascript to load the gpx file and add the track points to the map. Example code on GitHub
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
This script is licensed under the MIT license.