Zac Echola is muffin but trouble

Do it: Make a photo gallery with map

Published on 12/03/08
by Zac Echola

This post is a tutorial on how to make a simple photo gallery that also displays locations on a Google map. It’s intended for the Wired Journalists community. If you’d like to learn how to do more cool journalism projects with the Web, sign up now!

One of The Forum’s photographers came to me with a project at the beginning of the year. She was starting a weekly photo column in the paper, snapshots of people in the community and she wondered what we could do to give it a good presentation online.

“Let’s put them on a map!”

Here’s the result.

I always argue for more information and I tend to see photo captions with locations or approximate locations. That’s data. That’s very useful data when you imagine it in relation to other photos.

Since Ann’s project was going to be weekly, I figured we add the “where” data as another way to discover the photos. Over time, you’d get a broader picture of how the images relate to one another.

While I argue for putting more information out there for your readers, I also don’t like asking the development team for help programming one-off projects (we have a small team and this was a “want to have” project not a “need to have”). The nice thing about this project is that we can host nearly all the media and have complete control over the data in Google’s KML file so if we chose to port it for deeper integration into our sites, we could do that rather painlessly.

So, I went out in search of free mapping tools. This project only uses My Maps from Google and  MapChannels.

Let’s get to the nuts and bolts.

First, you need photos, captions and addresses. You’ll also need a Google account and a free account at MapChannels.

Upload all your photos to your host and make note of their URLs. You could even upload them to a free photo service like flickr. They just need to be online, because Google Maps doesn’t offer hosting. Once you get all that together head over to Google Maps.

Click on the My Maps tab and create a new map.

Enter the address of the first photo.  In the bubble that shows up with the pin, there’s a “Save to My Maps” link. Click it and select the map where you’d like to save the location. The bubble will turn into a couple of fields.

Click the image button on the bubble and paste in the photo URL that corresponds to the location you’ve set. You can resize photos under the Edit HTML tab. Add text, HTML (embed flash videos too!), add links, etc. You can change the color or type of the pin by clicking on the pin in the bubble. Google has quite a few predetermined pins, but you can also add your own 64×64 pixel pin here if you’d like.

Repeat for all your photos.

Now here, if you want to embed the map as is to your site, just click the “Link to this page” above the map on the right side. A window will appear with two options, one of which is an iframe you can paste into the page.

For what we’re trying to accomplish, I’m not to thrilled with the result.  The pins don’t tell you much about their contents.

That’s what MapChannels helps us with. Before we head over there, right click / copy link location of the “View in Google Earth” link. You’ll need that in a minute or two.

Don’t be turned off by how hideous the MapChannels site looks. The tools it has are pretty powerful and they’re free. Register for an account if you haven’t already.

Once logged in, click the “Create New Map Channel” link (upper right side of the page; it’s yellow).

In the data source field, paste the “View in Google Earth” link you saved earlier.

Give your map channel a name in the second field, agree to the terms and conditions and you’re almost there.

Here you’ll find tons of features. Play around with them to get your desired look.

For the in view map linked at the top of this article, all I did was changed the sidebar width, making it wide enough for the content and change “Info Window Type” to Zoom and Sidebar. I also deselected all the map channel links in the sidebar.

Copy the iframe code to your site and you’re done. Simple as that.

You can read the tutorials here for more on how to host all the scripts and other collateral on your own site, giving you some room to monkey with the functions at a more advanced level.

The end. Or is it?

Please leave a comment so I know what you think about this post. After that, check out It's randomonium! Or, if you're so inclined, take a gander at what I'm reading and my del.icio.us links.

Trackback URL: Make a photo gallery with map.

Tags: