This is the blog archive site. For the latest blog articles, click here.

Creating a Google Photo Map (Revised)

June 26, 2007

A Google Photo Map, at minimum, is a Google Map with markers on it that you can click to see a photo that was taken at that spot. Here's a simple example. I first showed how to create one in my blog entry for May 28, but now I've come up with a much better way to do it.

Getting Started

Here's what you need to do:
  1. You need a web server that has PHP with EXIF and GD support enabled, because you're going to run a PHP program there that needs to look at the EXIF data inside photographs and that uses the GD imaging extension to produce thumbnails. If you don't want to set up your own server, you can sign up with a hosting service, such as a2hosting.com. Make sure the hosting service has PHP with EXIF and GD, as A2 Hosting does.
  2. Using an FTP program, upload your geotagged JPEGs to a subdirectory on the server. "Geotagged" means that latitude and longitude are recorded in the photo. One way to do that is to record a track with a GPS device while you're shooting, and then to tag the photographs with ImageIngester.
  3. Download the file photomap.txt to your hard drive by right-clicking on it and choosing "Save Link As," or "Download Link Target," "Save Target As," or something similar. It doesn't matter where you download it.
  4. Rename the downloaded file "photomap.txt" to "photomap.php". That is, replace the ".txt" extension with ".php".
  5. Get a free Google Maps API key from www.google.com/apis/maps/signup.html. Make sure you enter the URL of the server (from step 1) in the Google form.
  6. Edit the downloaded "photomap.php" to replace the key there with your key. You'll see it in the first few lines of the file.
  7. Upload the edited "photomap.php" file to the parent of the subdirectory that contains the photos you uploaded. Make sure it's in the parent, not in the same directory as the photos.
  8. You have to create a web page in the directory that contains the photos named "index.php". Use whatever utility you normally use to edit web pages. Start with this as the contents of the "index.php" web page (the angled brackets and question marks are important):
    <? require("../photomap.php"); ?>
    <? photomap_start(); ?>
    <? map(); ?>
    <? thumbnails(); ?>
    <? photomap_end(); ?>
    
    This is just the starting point. Later you'll be adding to this web page.
  9. View the web page you just created in a browser. If the directory containing the photos is "BearAndBierstadt" the URL might be something like "http://www20.a2hosting.com/~rochkind/BearAndBierstadt". You should see your photos on a Google Map.

Adding a Page Title

If you want a page title that shows in the browser title bar, enter it as an argument to the photomap_start function, like this:
<? require("../photomap.php"); ?>
<? photomap_start("Bear and Bierstadt Lakes"); ?>
<? map(); ?>
<? thumbnails(); ?>
<? photomap_end(); ?>

Generating Thumbnails

When you click on a marker, a thumbnail appears in the Google Maps info window. Normally, the entire image is downloaded just to display the thumbnail; it would be more efficient if separate, much smaller images were available for the thumbnails. To make that happen automatically, just use your FTP utility to make the directory containing the photos writable, as in this example from Transmit, an FTP utility for the Mac:

image

Once you've given permission for the photomap.php program to build thumbnails, it will do so the next time the page is refreshed. Note that you don't upload the thumbnails—the photomap.php program generates them for you.

You can set the size for thumbnails in pixels with the second argument to the photomap_start function; if you don't, the default is 120:

<? require("../photomap.php"); ?>
<? photomap_start("Bear and Bierstadt Lakes", 100); ?>
<? map(); ?>
<? thumbnails(); ?>
<? photomap_end(); ?>

Enhancing the Web Page

You can put any HTML you want between the photomap_start, map, thumbnails, and photomap_end lines, depending on what the HTML is for and where you want it. For example:
<? require("../photomap.php"); ?>
<? photomap_start("Bear and Bierstadt Lakes", 100); ?>

<h1>Hiking Bear Lake to Bierstadt Lake to Hollowell Park</h1>
<p>
Rocky Mountain National Park, June 19, 2007

<? map(); ?>
<? thumbnails(); ?>

Start time: 2007-06-19T10:59:51<br>
Stop time: 2007-06-19T16:22:31<br>
Total time: 05:22:40<br>
Distance: 9.56 km (5.94 miles)<br>
Avg. speed: 1.78 kph (1.11 mph)<br>
Starting elevation: 2880.84 m (9451.58 ft)<br>
Ending elevation: 2571.90 m (8438.00 ft)<br>
Highest elevation: 2988.69 m (9805.42 ft)<br>
Lowest elevation: 2566.82 m (8421.34 ft)<br>
Highest - Lowest: 421.87 m (1384.08 ft)<br>

<? photomap_end(); ?>

To see what this page looks like, click here.

Showing the GPS Track and Waypoints

If you have a GPX file with a track and/or waypoints, you can have it drawn along with the markers:
  1. Upload the file to the directory that contains the photos.
  2. Change its extension from ".gpx" to ".xml".
  3. Add its name to the photomap_start function.

For example:

<? require("../photomap.php"); ?>
<? photomap_start("Bear and Bierstadt Lakes", 100, "20070619.xml"); ?>

<h1>Hiking Bear Lake to Bierstadt Lake to Hollowell Park</h1>
<p>
Rocky Mountain National Park, June 19, 2007

<? map(); ?>
<? thumbnails(); ?>

Start time: 2007-06-19T10:59:51<br>
Stop time: 2007-06-19T16:22:31<br>
Total time: 05:22:40<br>
Distance: 9.56 km (5.94 miles)<br>
Avg. speed: 1.78 kph (1.11 mph)<br>
Starting elevation: 2880.84 m (9451.58 ft)<br>
Ending elevation: 2571.90 m (8438.00 ft)<br>
Highest elevation: 2988.69 m (9805.42 ft)<br>
Lowest elevation: 2566.82 m (8421.34 ft)<br>
Highest - Lowest: 421.87 m (1384.08 ft)<br>

<? photomap_end(); ?>

Click here to see this page.

Adding Additional Photo Maps

If you want another photo map, just upload the photos to a new subdirectory and create another "index.php" page for it. It will share the "photomap.php" file that's already in the parent directory. You can upload a GPX file if you want (renaming it to an ".xml" extension).

For example, on my site I have two subdirectories of the directory that contains my photomap.php file. One is called BearAndBierstadt, which I used for the examples I showed above, and the other one is called MesaTrail:

BearAndBierstadt
     MJR_20070619_0001.jpg
     MJR_20070619_0002.jpg
     ...
     MJR_20070619_0008.jpg
     20070619.xml
     index.php
MesaTrail
     MJR_20070602_0001.jpg
     MJR_20070602_0002.jpg
     ...
     MJR_20070602_0011.jpg
     20070602.xml
     index.php
photomap.php

Blog Archives

Photography Articles

Raw Conversion: Better Never Than Late April 24, 2008

Scanning in India by Way of California With ScanCafe February 15, 2008

How To Back Up Your Personal Computer January 30, 2008

Every Camera I've Ever Owned January 25, 2008

Sharpening JPEGs for the Web January 4, 2008

Lessons Learned From My Memory Problem December 20, 2007

Hunting Down a Mac Hardware Problem December 20, 2007

Trimming GPS Tracks With GPSTrackViewer November 13, 2007

The World's Shortest Camera Buying Guide September 22, 2007

Transporting and Storing Portable Backup Drives August 26, 2007

"The Luminous Landscape" Teaches Me to Print August 4, 2007

Creating a Google Photo Map (Revised) June 26, 2007

Sony GPS-CS1: Not Good Enough for Geotagging Photos June 24, 2007

Epson P-3000/P-5000 Multimedia Storage Viewer March 10, 2007

Trying Out Infrared January 20, 2007

Stupid Designs Hold Digital Back April 1, 2006

 

Other, older articles


Galleries

image

A small collection of my best photos (click the image). You can order prints, too.


Software

image ImageIngester
image ImageVerifier
image LRViewer
image LRVmaker
image PhotoSelectLink™
image ImageReporter
image SpanBurner
image GPSTrackViewer

Books

The 2004 2nd Edition, a so-called "update" of the 1985 book, which turned out, not surprisingly, to be a re-write. Covers Solaris, Linux, FreeBSD, and Darwin (Mac OS X).


Entire contents of this web site Copyright 2006-2008 by Marc Rochkind. All rights reserved.