Below you should see a small gallery and an empty Google map. Click one of the images to show a larger version. GPS coordinates embedded in the image are read via JavaScript before they are fed to the Google map, which should center on the position where the image was taken.
The binary file access happens in binaryajax.js and the EXIF data reading happens in exif.js. Look further down for example code and check the blog for more stuff (and to leave comments!).
var oImg = new Image();
oImg.onload = function() {
EXIF.getData(oImg,
function() {
var aLat = EXIF.getTag(oImg, "GPSLatitude");
var aLong = EXIF.getTag(oImg, "GPSLongitude");
if (!(aLat && aLong)) return; // whoops, no GPS info
// convert from deg/min/sec to decimal for Google
var strLatRef = EXIF.getTag(oImg, "GPSLatitudeRef") || "N";
var strLongRef = EXIF.getTag(oImg, "GPSLongitudeRef") || "W";
var fLat = (aLat[0] + aLat[1]/60 + aLat[2]/3600) * (strLatRef == "N" ? 1 : -1);
var fLong = (aLong[0] + aLong[1]/60 + aLong[2]/3600) * (strLongRef == "W" ? -1 : 1);
// center the google map and add a marker
oMap.setCenter(new GLatLng(fLat, fLong), 13);
oMarker = new GMarker(new GLatLng(fLat, fLong));
oMap.addOverlay(oMarker);
}
);
}
oImg.src = "my_gps_tagged_photo.jpg";