How to: Embedding maps with a GPS track and geotagged photos

I spent a better part of yesterday evening to figure out how to embed a map that includes a GPX track and geotagged pictures on my blog for creating ride reports. So far I had used GPSies convenient embedding feature; yet that only shows the track itself and no photos. Or so I thought. In the end, I figured out two different ways to achieve what I want, all with some advantages and disadvantages. What they have in common is that they first require you to embed geodata into the images' meta-data (commonly known as "geotagging").

Getting geodata into your images

Let's start with the theory. You have to connect the geodata with the images. If you don't have a fancy new camera/mobile phone that has a GPS receiver already built-in and if you don't want to do it manually in Picasa/Google Earth or on flickr, you will do this by matching time stamps. The idea is that your images include the time when they were taken and you can then take the GPS track and, as it were, look up that time stamp and see which location it matches.

To illustrate this principle, think of a train journey: you were traveling through the country by train and, because you're a railway buff, you took pictures of some of the stations on the way. You had planned to write down where you took which picture in your notebook; but because you got carried away by the excitement about some of the trains and station buildings you forgot about that. Is everything lost now? No, not at all. Because your photos' metadata includes the time when they were taken, you can just look at the timetable of your train and match the time of the image with the schedule of the train and figure out where you were when. (For this to work, the train, of course, has to be on time. More on that later.)

No back to your actual ride pictures: While you could do the connecting between image time and location data manually (just open the gpx-file in a text editor, look up the matching time/location, and then write the location into the images metadata), this would be very cumbersome, especially if you have a lot of pictures. Fortunately, there's software out there to help you. I recommend GPicSync for the task. It's a free, open source tool and in addition to geotagging your images, it has a couple of additional functions that will be helpful for the later steps in creating your embedded maps.

GPicSync Screenshot

Basic geotagging in GPicSync is relatively straight-forward. Choose the folder in which you have the images to be geotagged, choose the folder containing the GPS track and then click "Synchronise". However, chances are good that this is not going to work right away, and this brings me back to the train analogy. I've pointed out that matching images to stations on the timetable only works if the train is actually on time. For your pictures this means that your GPS devices' and your camera's time has to be in sync. There are two potential problems: first, there is the problem of the time coding. Most GPS devices save the time in the Coordinated Universal Time (UTC) format. For our purposes, we can assume that UTC is the same as Greenwich Mean Time (GMT). Cameras, on the other hand, often save the time in the local time to which you have set it. So if you're on the US east coast and you take a picture at noon (local time), your camera will probably time-stamp the image with 12:00, while your GPS will have the correct location time-stamped with 17:00 (Daylight Savings Time complicates this further). This, obviously, is a problem for GPicSync, as it can't know which time format each device is using. Thus, you have to manually enter the UTC off-set.

Figuring out this value can be a bit confusing, but in many cases it's enough to figure out the time difference between your time zone and GMT. E.g., if you're in the Eastern Standard Time zone that would be -5, for Central European Time it would be +1, etc.. Fortunately, GPicSync will not synchronise your images if the time difference between the GPS and image data is larger than 300 seconds, thereby preventing most errors of this kind.

The second dimension to the off-set problem lies in the small differences between GPS and camera time. While a GPS device's time is always accurate (it gets the time from the satellites), your camera might be a couple of minutes off. Because your speed on the bike in general is not very high, this probably won't matter too much. But if you care about accuracy, the easiest way to deal with the problem is to take a picture of your GPS device's time display at the beginning of each ride. This allows you to determine exactly how big the offset between the two is and you can correct for it in GPicSync. E.g., if you're on the east coast and your camera is 15 minutes ahead of the GPS, you'd enter -4.75 as the value for the offset (15 minutes = 0.25 hours).

--Edit--
Okay, I've made this unnecessarily complicated: I just figured out that GPicSync has a special function for correcting time offset not related to time zones: Just go to Options > Local Time Correction and enter the respective values. Way easier than calculating the decimal value yourself.
--/Edit--

If you've done all that correctly, GPicSync will write the correct geo-tags into your images meta-data. Now we can focus on the second step -- displaying a map, your track, and the images on a web page.

GPSies + Picasa

1. Upload your track on GPSies.com.
2. Upload your now geo-tagged images to a Picasa web album. Make sure that the album is public! In the right column of your album's page you should see a little map with place markers for all your images.
   
   
   
   
3. In the "Edit track" function on your ride's GPSies page, go to "Manage pictures/video".
   
   
   
4. Enter your Picasa user name and the name of the album and click "save".
5. If you now view the track, all the images should be correctly placed on the map. And at the very bottom of the page, you'll find the IFRAME code to embed your map on your webpage. Just like here:

While this method is pretty simple, it has one major downside: if you've taken several pictures at the same location, the map will only show you one of them. The alternative is to create your own map with the help of Google Maps. But this will be subject of another post. Please leave a comment if you found this tutorial useful or have questions!