This demo application shows how to upload images and then view places where these images were made on Google Maps.

Features

The application highlights the following features:

  • Extract and transmit geographical information stored in EXIF metadata to server.
  • Create and send high and low resolution thumbnails along with original file.
  • Add a comment to every uploaded image.
Note

To find information about how this demo is implemented using a specific platform, see the Samples by Platforms topic.

Client-Side Code

Extracting GPS Details

Some capture devices support saving GPS details of places where they make photos. In most cases such data is stored in EXIF metadata. As it is described in the Working with EXIF and IPTC Metadata topic, Image Uploader allows extracting EXIF metadata fields and submitting them to the server.

GPS details required to locate a point on Google Maps are ExifGpsLatitude, ExifGpsLongitude, ExifGpsLatitudeRef, and ExifGpsLongitudeRef. So to submit GPS details to the server this demo application uses the ExtractExif property.

JavaScript

// ...

//send GPS coordinates from exif
iu.addParam("ExtractExif", "ExifGpsLatitude;ExifGpsLongitude;ExifGpsLatitudeRef;ExifGpsLongitudeRef");

// ...

Configuring Thumbnails

This demo application uploads two thumbnails for each selected image. The first one is a low resolution preview thumbnail, the second one has a higher resolution and is used to display image details.

Server-Side Code

To complete the upload started by Image Uploader, some actions on the server side should be performed. The upload script of this application is almost equivalent to one of the Basic Demo Sample. The difference is that the application saves GPS coordinates, image dimensions and filesize, as well as URLs to uploaded images in a text file using JSON format instead of XML.

Gallery

The text file created server-side is loaded and parsed on the gallery page. The data obtained from this file is used to create Google Maps markers.