Hack 55. Put Photographs on Your Google Maps

Treat photographs as map layers and add them to your Google maps.

While figuring out how to lay my own images into the Google Maps interface, I ended up with some pretty useful JavaScript, so I bundled it up as a tightly integrated extension to the official API. The result is TPhoto. TPhoto allows you to embed alternate aerial photographs inside your Google Maps. The added photos pan and zoom along with the main map view, without interfering with any clicks on the map. Figure 6-10 shows an example of an aerial photo of Groom Lake from 1959 overlaid over the Google Satellite imagery.

Figure 6-10. Groom Lake, 1959

Groom Lake. Dreamland Resort. Watertown. The Ranch. For such a secretive place, people certainly know it by a lot of names! The image in Figure 6-10 comes from my Area 51 page at http://gmaps.tommangan.us/groom_lake.html. Figure 6-11 shows a 1968 image over the Google Satellite imagery.

You can add the ability to overlay photos onto your own Google Maps by installing the TPhoto extension.

Download the TPhoto library from http://gmaps.tommangan.us/tphoto.html/. The current version is tphoto.16.js, available at http://gmaps.tommangan.us/tphoto.16.js. Place it on your server and include it after you include the Google Maps API in your JavaScript. You could include it directly from the tommangan.us server, but it is on very rare occasions not available, so I recommend you download the file to your own server and link it as shown here:

There are two ways to use TPhoto. In the first method, you supply the lat/long of the top left and bottom right corners of your image. In the second method, you supply a single lat/long anchor point, the base zoom level, and the dimensions of your image. The first method looks like:

	var groom1959 = new TPhoto();
	groom1959.id = 'groom1959';
	groom1959.src='images/groom1959.jpg';
	photo.percentOpacity = 50;
	groom1959.anchorTopLeft = new GPoint(-115.823107,37.248368);
	groom1959.anchorBottomRight = new GPoint(-115.801649,37.230123);

	map.addTPhoto(photo);

Figure 6-11. Area 51 in 1968, over Google Satellite imagery

Here is one way to create a button that will show and hide the overlaid image. This would appear in an HTML form button.

The button calls the showImage() Javascript method. The variable show serves as a toggle. It starts at 0 (i.e., don't show the image) and flips state each time the button is clicked. Either the addTPhoto method or the removeTphoto method will be called depending on the value of show. The text displayed on the button is also toggled from "show 1959" to "hide 1959."

	var show = 0;
	function showImage() {
	 show = 1-show;
	 if (show == 1) {
	 map.addTPhoto(groom1959);
	 document.getElementById('show1959').value = 'hide 1959';
	 } else {
	 map.removeTPhoto(groom1959);
	 document.getElementById('show1959').value = 'show 1959';
	 }
	}

The second approach takes different parameters:

	photo = new TPhoto();
	photo.id = '[id]';
	photo.src='[src]';
	photo.size = new GSize(width,height);
	photo.baseZoom = [zoomLevel];
	photo.percentOpacity = [percent];
	photo.anchorPx = new GPoint(x,y);
	photo.anchorLatLng = new GPoint(lng,lat);

	map.addTPhoto(photo);

There are only a few methods you need to use with TPhoto.

 

TPhoto()

The constructor, which creates a new photo instance. Takes no parameters.

The extension adds two methods to the GMap object:

 

addTPhoto (photo)

Adds the given photo to the map.

 

removeTPhoto (photo)

Removes the given photo from the map.

 

setOpacity (percentOpacity)

Defines the desired opacity of the embedded image. percentOpacity is a number from 0 to 100, inclusive.

Setting opacity allows you to see through the overlaid image to the base layer. It allows you to do things like compare then and now imagery as shown in Figures 6-12 and 6-13. These are aerial views comparing the overlaid 1994 USGS photo over the Google aerial imagery. The first image shows the Google Aerial base layer view with the 1994 photo overlaying it and set to 20% opacity. You can see through the older image to how things are now (where now is when the image was taken).

The right view is at 100% opacity. In the left image you can see buildings that didn't exist in 1994. The two Blackbirds are a constant.

Figure 6-13 is an image of the Blackbird Airpark in Palmdale, California from the Blackbird Sighting page at http://gmaps.tommangan.us/blackbirds.html. The Blackbirds map was my first Google Maps project. Soon after the API was released, I found myself in need of a project that would enable me to go about breaking maps. As it happened, I had just read about Robb Magley's search for the crash site of one of the Blackbirds and thought it would be fun to find out where all of them are now. This is the kind of application that Google Maps has made possible!

Tom Mangan

Figure 6-12. Blackbirds at 20% opacity