How to create a panorama and display it using the Google maps API using free software

The OSS community has recently released many tools which make the creation and display of magnificent panoramic photographs very easy. And the latest SLR cameras have enabled the creation of some very high resolution and large panoramas however, downloading a large file to view the image is not very convenient over the web. The goal of this article is to get you started on assembling a panorama from a set of pictures and displaying them on your site using the Google Maps API.

Requirements

Pictures to compose the panorama (with easily identifiable overlapping sections)
Hugin: A freeware image alignment and stitching software
GMapImageCutter: A freeware tile set generator for Google Maps API
Google Map API Key

Note: The computer hardware requirements to create a panoramic picture are quite high. This is specially true if you have large images (>10 MPixel/image) or are combining a lots of images.
Note: Although the software linked above works on both Windows and Mac OSX systems, I have found it easier to use Hugin on a Mac and GMapImageCutter on windows.

Photography suggestions

Use a tripod if possible or use a shutter speed of greater than 1/100 if hand holding
Make sure to lock exposure and white balance settings
Try not to change the focal length of your lens between pictures for the same panorama (Hugin handles different focal lengths but it becomes more complicated to compose the panorama)
Make sure to keep a 20-30% overlap between pictures
If there are people or vehicles around, try not to have the same person in two frames (It just looks weird)
If you use any post processing tools, make sure to apply the same changes to all pictures in the panorama
I usually take a picture of the ground before and after a panoramic sequence to indicate start and stop

Merging images

Open Hugin and add your images
If your images contain EXIF (they probably do) then Hugin should pick up the settings used automatically.
Click “Align” to begin the auto align process.

If the auto-align process is unable to find good point of commonality, it will complain. This occurs if the shot has motion blur, moving subjects or is hand-held. You can switch to the “control points” tab and tweak them till the error rate goes down or go with what is suggested. At the end of the alignment phase, a preview of the panorama is displayed and you can play with the projection till you find the one you like.
Once you are satisfied with the preview, close the window and click “Create panorama”.
Convert the TIFF file produced by Hugin to a JPEG file (100% quality)

Creating Google Maps Panorama

Start GMapImageCutter using the batch files/shell script . If you are manually launching it make sure to use the -Xms512M -Xmx1024M java options.
Load your panorama JPEG (File menu => open…)
Hugin automatically suggests the levels of zoom to use. You can adjust the levels up or down. The higher the number of zoom levels, the more tiles that will be generated. I usually stick to around 5-6 levels. Then click the “Create…” button followed by the “Start” button to start the process.
Finally edit the generated HTML file:
1. Replace the PUTAPIKEYHERE with the Google Maps API key that you received from Google.
2. Replace the Author, Description, keywords meta information with your own name, title, description.
3. Replace the page title in the <title> tag.
4. Adjust the default zoom using the initialZoom variable around line 26
5. If you dont want your panorama to wrap around (i.e. not 360 degree panorama) set the imageWraps variable on line 27 to false
6. Edit the copyright information found around line 141,142.
7. If you would like a different background color for the panorama you need to adjust 2 places:
  - Edit line 156 and modify it to look like
    map = new GMap2(document.getElementById("map"),{mapTypes:[pic_customMap],backgroundColor:"#000000"});
  - Edit the tag on line 176 and add a bgcolor attribute:
    <body onresize=”resizeMapDiv()” onload=”load()” onunload=”GUnload()” bgcolor=”#000000″>