Not too long ago now, I created an account on Flickr to store all of The Vicarious Crew’s photos. Flickr, as you all know, is an excellent way to share photos online with friends, family, and everyone else out there in Internet land. Allowing you to group photos, add notes, comment on photos, and many more features has made Flickr one very hot item.
There was something else that I wanted to do for the site though, and that was, create a map. Not just a flat boring map outlining where we’re going. I wanted a completely dynamic map that would show all of the photos that have been added to The Vicarious Crew’s Flickr photoset. That way, visitors can see exactly where photos were taken.
I had no idea how to go about doing this, as I didn’t even know anything about how to implement a map on a website in the first place. All I had was my Flickr account. With a variety of sites out there including Google Maps and Yahoo! Maps (Beta), Google Maps appeared to be the most commonly used, so I opted to go for that.
After signing up for both a Google Maps API and a Flickr API, I then spent a few hours researching the web looking for ways to put the two together. I finally came across a blog post on John Nunemaker’s website, Addicted To New. The post was titled “Geophotos with Flickr and Google Maps”.
What I had found, was exactly was I was looking for. Available for download at John’s site is the Addicted To Flickr PHP class. As John states on his site, “I know nothing about licenses and don’t really care to. Use this however you want…”, so proceed at your own will. I quoted a paragraph from his site as well to give you a brief overview of what exactly this does:
All you need to show things with the Google Maps API is the longitude and latitude coordinates. All you need to find similar photos on Flickr is a tag. Put the two together and you simply have to tag a Flickr photo with a similar tag and the longitude and latitude coordinates and you have geophoto.
Ok, so, I now had my Flickr API and photoset, my Google Maps API along with the XHTML markup that Google provides, and Addicted To Flickr. The next step was to figure out how I was going to tag my photos with the right latitude and longitude coordinates. To make a photo appear on the map, you need to give it three tags… “geophoto” (which I changed to “geotagged”), geo:lat=[the_latitude], geo:long=[the_longitude].
There are a few different ways to achieve this. The first I found was a greasemonkey script provieded by Excellatronic Communications. If you already have greasemonkey installed (FireFox) then all you need to do is install the user scripts for this to work. This almost worked for me, but alas, it didn’t come through 100%. So being as impatient as I was, I continued my search.
The next process that I found is currently the one I am using right now. It’s called Flickrmap. What it allows you to do is, if you have Google Earth you can go to the exact point at which you want to get the lat/long coordinates from and Flickrmap will appy those coordinates as tags to any Flickr photo that you tell it, along with the third tag “geotagged”. Bam. Done. Easy.
Anyway, after I tagged my photos and added my Flickr user ID to the PHP class, it pretty much just started working. I spent most of my time customizing everying and going though all the lines of PHP to see what was going on.
So there you have it. It may sound like a lot, but you could have it all up and going in less than an hour if you have everything you need. In summary, if you would like to have a Google Map on your site that displays photos from a specific Flickr photoset, just follow these steps:
- Get yourself a Flickr account if you don’t already have one.
- Apply for a Flickr API.
- Take note of your Flickr user ID. You can get it by looking at the URL of one of your photos while you are logged out (ex: http://www.flickr.com/photos/userID/photoNumber/).
- Sign up for a Google Maps API (note, you need an existing GMail account to apply).
- Go to Addictedtonew.com and download Addicted To Flickr.
- Add your Flickr API and user ID to the PHP class in Addicted To Flickr.
- Add the script for your Google Maps API into the main PHP file that builds the map.
- Add three tags to each of the photos in your photoset that you want to appear on the map with Flickrmap or Excellatronic Communications’s greasemonkey scripts .
- Voala! You have a completely dynamic map that automatically creates markers for each Flickr photo you have tagged with the three essential tags. Every new photo you tag automatically appears on your map.
The Vicarious Crew’s map currently only has a couple of photos as the trek is yet to begin. After June 1st, the photos will begin to appear, so keep and eye on it.







