Interactive GPS Maps

I've started using GPSVisualizer to generate interactive Google maps instead of static maps using Google Earth. Here is an example.

It's still a little complicated to do, so here are the steps:

  1. Go to gpsvisualizer.com
  2. Upload your saved .GPX file and see the resultant map
  3. Click on "save your Google Map"; you will get a new window with only your map
  4. View the source for that page, select it all, and paste it into your favorite text editor (I use TextWrangler)
  5. Find the line "var google_api_key = '';" and put your Google API key between the singe quotes
  6. If you want a narrower map (with my theme and a sidebar I use 450px), replace the "width:" value with your own in the line that begins "
  7. Save the modified file as an HTML file
  8. Upload the file you created to your web site (Sandvox can do this as a download page, I don't include it in the site menu or the collection index)
  9. On the page where you want the interactive map, edit the raw HTML and put the following lines in your code:
    <iframe src="my_map.html" width="600" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0">
      <a href="my_map.html">Click here for the map</a>
    </iframe>
    replacing both instances of my_map.html with your own file name
  10. Publish your site, and it should all work
Copyright 1997-2022, Ben Littauer