Reading EXIF meta data from JPEG image files

I was using this JS library, and google maps.

Exif library will extract GPS location as a Degree-Minute-Second, while Google uses Decimal degrees, that is why we need first converter:

	function ConvertDMSToDD(degrees, minutes, seconds, direction) {
		var dd = degrees + minutes/60 + seconds/(60*60);

		if (direction == "S" || direction == "W") {
			dd = dd * -1;
		} // Don't do anything for N or E
		return dd;
	}

Next thing we need to load the image, in my case I did it with simple Ajax request (no jQuery):

	var http = new XMLHttpRequest();
    http.open("GET", "IMG_20150103_154405.jpg", true);
    http.responseType = "blob";
    http.onload = function(e) {
        if (this.status === 200) {
            var image = new Image();
            image.onload = function() {

Then reading EXIF data is simple:

EXIF.getData(image, function() {
                    myData = this;
					
					var mapCanvas = document.getElementById('map-canvas');
					var latDegree = myData.exifdata.GPSLatitude[0].numerator;
					var latMinute = myData.exifdata.GPSLatitude[1].numerator;
					var latSecond = myData.exifdata.GPSLatitude[2].numerator / 1000;
					var latDirection = myData.exifdata.GPSLatitudeRef;
					var gLat = ConvertDMSToDD(latDegree, latMinute, latSecond, latDirection);
					
					var lonDegree = myData.exifdata.GPSLongitude[0].numerator;
					var lonMinute = myData.exifdata.GPSLongitude[1].numerator;
					var lonSecond = myData.exifdata.GPSLongitude[2].numerator / 1000;
					var lonDirection = myData.exifdata.GPSLongitudeRef;
					
					var gLon = ConvertDMSToDD(lonDegree, lonMinute, lonSecond, lonDirection);

Notice that latSeconds I had to divide with 100, mapCanvas I need for google maps, an code for google maps looks like this:

var myLatlng = new google.maps.LatLng(gLat, gLon);
	
var mapOptions = {
  center: myLatlng,
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
	position: myLatlng,
	map: map,
	title: 'Hello World!'
});

google.maps.event.addListener(marker, 'click', function() {
	alert("Hello world")
});

To center google maps I needed myLatlng which I also used to place a marker, and here you can notice example how to add event to marker:

google.maps.event.addListener(
  marker, 'click', function() {
     alert("Hello world")
});

Example download from here. Also, don't forget this example requires IIS, or some other web server.