In previous chapters, you learned about the raw ingredients of mashups. This chapter teaches you how to write mashups by walking you through a detailed example of mashing up Flickr photos with Google Maps. This chapter draws upon what you have learned in previous chapters. In Chapter 1, you learned about how geotagging photos started in Flickr and how people such as Rev. Dan Catt and C.K. Yuan built tools—essentially mashups, such as Geobloggers and GMiF—to display those geotagged photos. In Chapter 2, you learned about how such features were baked into Flickr. In Chapter 6, you learned about how to program the Flickr API, while in Chapter 8, you learned the basics of Ajax and how to program Google Maps. We will draw upon all those pieces of knowledge in this chapter.

Given that you can already display Flickr photos on a Yahoo! map, why would you still build any Flickr-­map mashup? Well, you might for a number of reasons. You might have a preference for Google Maps over the default maps. Making such a mashup is an instructive process. What better way to learn about mashups than to mash up the two most mashed up services: GMap and Flickr?

What you learn in this chapter will be useful for other mashups. The type of mashup shown here is an extremely common one: getting data from somewhere and putting that data on a map. (Here, we’re not screen-­scraping that data but rather getting that directly out of an API. There are mashups that require screen-­scraping, but that’s largely outside the scope of this book.)

You will also learn about the interaction of server-­side and client-­side programming, another major issue in many mashups. In addition, you will learn about the central process of dealing with impedance matching between APIs. That is, you will find how to make APIs that have different conceptual and implementation details fit together so that data can flow between them. You will learn where to find the common matching points (for example, latitudes and longitudes are common in both the Flickr API and Google Maps) and create interfaces (channel adapters) that bridge the APIs. Finally, there is also the process of taking the work you did and then recasting the same logic into a different environment.

The bulk of this chapter is devoted to writing a simple mashup of Flickr photos with Google Maps using the Google Maps API, but we finish by creating a Flickr/Google Maps mashup using the Google Mapplets API. Since the Mapplets API is similar but not identical to the Google Map API, you will be able to use some of the programming you will do for Google Maps. You’ll see how mapplets eliminate the need for server-­side programming on your part; the solution we will come up with will be a pure HTML/JavaScript combination.

The goals of this chapter are as follows:

The Design

For both the Google Maps and the Google Mapplets–based mashup, you will want to let your users search for geotagged photos in Flickr and to display them on a Google map. When the user changes the bounding box (that is, the rectangular region of a map often defined by the coordinates of the map’s southwest and northeast corners) of the map (by panning and zooming or by changing the zoom level of the map), a new search for geotagged photos is done, and the resulting pictures are displayed on the map.

We will build the mashups in manageable chunks:

• You’ll review what you have already learned about geotagging in Flickr and then see how to use the Flickr API to associate locations with photos and how to find geotagged photos.

• You’ll study how to access XML web services from the browser using the XMLHttpRequest browser object, both natively and wrapped in the Yahoo! UI library.

• You’ll study how the security constraints on the browser necessitate a server-­side proxy for accessing web services.

• You’ll build a server-­side proxy to get Flickr geotagged photos.

• You’ll work toward building a mashup of the client-­side Google Maps API with the Flickr API by first building a simple client-­side framework.

• You’ll elaborate the client-­side framework to translate a search for Flickr geotagged photos into an HTML display of the results.

• You’ll transform this framework into a mashup of the Google Maps API and Flickr through a series of steps: setting up a basic map; having the map respond to changes in the viewport of the map; bringing together the Flickr and Google Maps into the same page, first as independent pieces; wiring the bounding box of the Google map to be the source of lat/long coordinates; and finally, making the pictures show up in the map.

• You’ll refactor this work into a Flickr/Google mapplet to create a pure client-­side solution.

• You’ll draw conclusions about what you learned in making these mashups and see how they can be applied to creating other mashups.

	Note
	Chapter 13 provides greater detail on maps and further elaborates on the core examples of this chapter—by mashing up Flickr and Google Earth via KML.