Mashing up the Flickr API with Google Maps

This post is 3rd and final post in a series documenting my experience Learning the Google Maps API.

My final experiment in learning the Google Maps API involves using the Flickr API as a data source for a set of  map markers and info windows.

The first post in this series focused on loading a set of markers, with associated info windows onto a map. In that post I mentioned that in a production environment I would be looking at loading the data for the markers from an external source. Using the Flickr API to fetch the data about my public photos is one way that I could develop an example of how this would in practice.

Separating the data from the code

Why is it necessary to store the data to be mapped separately from the code that creates the map? Think about the alternative.  In my first example the data for the markers and info windows was written directly in the JavaScript code that created the map. But what if the data changes?  I would need to edit the code to add the new data.

In a library context, where I might be mapping a collection of photos (or other geotagged material), that data is likely to change regularly as items are added or removed from the collection. Someone is already managing the metadata about those items. If I have to change my code every time there is a change in the collection it is unnecessary extra work.

A much better solution is to have the expert create and maintain the metadata about the items in the collection (including the location data). Then your map code can request whatever data is available and generate the necessary markers and related information.

This is a perfect illustration of why it is important for libraries who want to make their collections accessible publicly should consider taking an open data approach. When making choices about how collection data is stored and what software is used, libraries might want to prioritise the need for systems that provide structured access to the data contained therein. I've written other stuff about open data if you're interested.

Creating the map

Without going into the actual javascript code, there are 3 steps to creating this map:

1. Create the base map
   This was straightforward and covered in the first example
2. Fetch the photo data from Flickr
   The Flickr API documentation and the associated API Explorer make generating the request URL very simple, which may not be as straightforward using other applications with less well developed APIs.
3. Loop through each photo in the data that is returned and create a corresponding marker on the map
   The data about each photo contains the lat/long coordinates for the marker and all the information required to generate an info box with the title, thumbnail and a link back to the image on Flickr.com

And here's the result.

See the Pen Google Maps + Flickr API mashup by Martin Boyce (@boycetrus) on CodePen.

Notes on the map

In this example I was only retrieving my own public photos from Flickr, and thus avoided having to deal with authentication. Many parts of the Flickr API do require authentication and that adds a lot more complexity.

There was a limited number of photos returned in the data set from Flickr. This was a proof of concept and limiting the number of photos ensures the request doesn't slow down the loading of the map, however, I feel like I could increase the number substantially before I noticed any significant impact on performance.

The Flickr API documentation is excellent. I used the flickr.photos.search endpoint, which has many different arguments that you can append to get at just the photos I wanted. Limiting to photos that have been geotagged, for instance, is one way to restrict the data. The associated API Explorer has a nice user interface for generating and testing requests. You don't need to be a developer to play around with it and you can access the API Explorer from the bottom of every page in the documentation.


So that's the end of my journey in to the Google Maps API. It was easier than I thought it was going to be and, like everything, the more I did the easier it became. I am very pleased with what I created and think that I have the fundamentals to create almost any map.

I would be interested to hear any ideas you have for maps that could be relevant to libraries or based on library collections and data.