Hosting by
KnownHost

Javascript EXIF GPS Info - Google Maps Example

This is a test of the GPS part of the Javascript EXIF library previously posted here.
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!).

Below is a snippet of code that shows how this library can be used to retrieve GPS coordinates (and other info) from photos and use this data with Google maps. Refer to the Google Maps API for more on how to setup Google maps.


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";

 


Copyright 2008-2009 Jacob Seidelin - Privacy Policy - Some icons by Bruno Maia, IconTexto