Display Geo Location of JPG/JPEG Pictures on Web Page

This lab shows you how to use the exif Python module to find the lat, lon and elevation of where a picture was taken, and then dynamically write a web page with an embedded Google Map.

NOTE: These scripts will only work with jpg and jpeg files. Any other image file types will most likely error out. There is no correcting mechanism.

NOTE: The API key may not work for you. If not you’ll have to get your own API key from Google – https://developers.google.com/maps/documentation/javascript/get-api-key

Install exif Python module:

pip3 install exif

Notes:

  • exif Module reads the metadata stored in image files
  • api_map – is the API Key for Google Maps. You may need to get your own for this to work.
  • decimal_coords() – Turns the GPS coordinates into Lat, Lon that Google Maps understands

gps-info.py

from exif import Image

api_map = "AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"

img_path = 'IMG_1789.jpeg'
with open(img_path, 'rb') as src:
    img = Image(src)

def decimal_coords(coords, ref):
    decimal_degrees = coords[0] + coords[1] / 60 + coords[2] / 3600
    if ref == "S" or ref == "W":
        decimal_degrees = -decimal_degrees 
    return decimal_degrees

def image_coordinates(image_path):
    with open(img_path, 'rb') as src:
        img = Image(src)
    if img.has_exif:
        try:
            coords = (decimal_coords(img.gps_latitude, img.gps_latitude_ref), decimal_coords(img.gps_longitude, img.gps_longitude_ref))
        except AttributeError:
            print('No Coordinates')
    else:
        print('The Image has no EXIF information')

    print(f"Image {src.name}")    
    print(f"Device: {img.make} {img.model}, OS Version:{img.get('software', 'Not Known')}")
    print(f"Was taken: {img.datetime_original}")
    print (f"Coordinates: {coords}")
    print(f"Altitude: {img.gps_altitude}")
    print(f"http://maps.google.com?q={coords[0]},{coords[1]}")
    
    picture = f'<img style="height:500px; width:500px;" src="./{img_path}">'
    maps = f'<iframe style="height:500px;width:500px;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q={coords[0]},{coords[1]}&key={api_map}"></iframe>'
    file = open('gps.html', 'w')
    file.write(f'{picture} {maps}')
    file.close()

image_coordinates(img_path)
Code language: PHP (php)

Show Geo Location for All JPEG/JPG Images in Folder

This continuation of the lab simply takes all of the image names in a picture directory and adds them to a list. We then iterate through the list to display all of the images and embedded Google Maps on a web page.

gps-info-list.py

from exif import Image
import os

api_map = "AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"

path = 'pic/'

pic_list = os.listdir(path)

print(pic_list)

file = open('gps.html', 'w')
file.write("")
file.close()

file = open('gps.html', 'a')
for img_path in pic_list:
  print(img_path) 
  img_path = f'{path}{img_path}'
  with open(img_path, 'rb') as src:
      img = Image(src)

  def decimal_coords(coords, ref):
      decimal_degrees = coords[0] + coords[1] / 60 + coords[2] / 3600
      if ref == "S" or ref == "W":
          decimal_degrees = -decimal_degrees 
      return decimal_degrees

  def image_coordinates(image_path):
      with open(img_path, 'rb') as src:
          img = Image(src)
      if img.has_exif:
          try:
              coords = (decimal_coords(img.gps_latitude, img.gps_latitude_ref), decimal_coords(img.gps_longitude, img.gps_longitude_ref))
              picture = f'<img style="height:500px; width:500px;" src="{img_path}">'
              maps = f'<iframe style="height:500px;width:500px;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q={coords[0]},{coords[1]}&key={api_map}"></iframe><br>'
              file.write(f'{picture} {maps}')
              print(f"Image {src.name}")    
              print(f"Device: {img.make} {img.model}, OS Version:{img.get('software', 'Not Known')}")
              print(f"Was taken: {img.datetime_original}")
              print (f"Coordinates: {coords}")
              print(f"Altitude: {img.gps_altitude}")
              print(f"http://maps.google.com?q={coords[0]},{coords[1]}")
          except AttributeError:
              print('No Coordinates')
      else:
          print('The Image has no EXIF information')

  image_coordinates(img_path)

file.close()
Code language: PHP (php)