Mapping flickr photos on Google Maps

One of my hobbies is photography, and like many photographers I am frequently on flickr looking for good ideas to steal. For some photo projects, like street art or weird stuff, I am often looking for new subjects, and I need to know not only what they are but where they are. Luckily, many flickr users geotag their photos, so that flickr can display a map with the location where the photo was taken. For me, planning a trip to another city usually involves looking on flickr to find new things to photograph and their locations.

Flickr isn't the best tool, however, for keeping track of lots of locations. For that I use google maps, which makes it easy to create lists of locations. It also makes it easy to export them to KML, which can easily be converted into formats that can be loaded onto a GPS device. So I've spent a lot of time copying coordinates and other information from flickr to google maps. There had to be an easier way.

One easier way is to use a Greasemonkey script by "tarmo888" called "Alternative Map Links for Flickr." This adds links to many mapping services from any flickr page that includes a geotagged photo. With one click, you can plot the photo's location on any of these services, including Google Maps, where it's ready to be saved to your own custom map. Handy!

There are a couple small drawbacks, though, for my purposes. First, to use the script I'd have to use Firefox and install the Greasemonkey add-on and the script to every Firefox profile I'd want to use for mapping. Second, the point the the script passes to Google Maps is identified only as "Flickr." I'd still have to copy other information to Google Maps.

So I made this little bookmarklet, borrowing a few ideas from tarmo888. You can install it by dragging this link to your browser's bookmarks toolbar:

flickr2gmap

From any geotagged flickr photo page, the bookmarklet will open a Google Maps window with a marker at the photo location. It passes along the title of the photo, the date taken (if known), and a link back to the flickr photo page.You can save the point to your own custom map and edit further as desired.

Here is the code in more readable form. Feel free to reuse if you wish:

javascript: (function() {
    var m = document.getElementById('photo-story-map-zoom-out');
    if (m) {
        var cut = function(str,cut) {
            str = str.replace(/&/g,'%2526amp;');
            if (str.indexOf(cut)>0) { return str.substring(0,str.indexOf(cut)) }
            else { return str }
        };
        var re = new RegExp('[\\?&]c=([^&#]*),([^&#]*)');
        var c = re.exec(m.src);
        var lat = c[1];
        var lon = c[2];
        var t = cut(document.title,' | Flickr - Photo Sharing!');
        var d = "date unknown";
        var s = document.getElementById('photo-story-story');
        if (s) {
            var dre = new RegExp('/date-taken/([0-9]+/[0-9]+/[0-9]+)/');
            var r = dre.exec(s.innerHTML);
            if (r) {d = r[1].replace(/\//g,'-');}
        }
        var l = cut(document.URL,'/in/');
        var u = 'http://maps.google.com/?q=' + lat + ',' + lon + '(' + escape(t) + '+' + d + '+' + l + ')';
        window.open(u,'flickr2gmap');
    } else {
        alert('No map info found on this page.');
    }
})
()
And no, this doesn't have anything directly to do with the Systems Librarian gig.

Update, 2012-07-02:

Minor change to the script to make it work with the new flickr maps.