In this chapter, you learned how to create a mashup of two different APIs, the Flickr API and the Google Maps API, to display geotagged Flickr photos on a Google map. After reviewing geotagging in Flickr, you learned how to access XML web services using the XMLHttpRequest browser object (XHR) and deal with security constraints in the browser by creating server-­side proxies to access web services. You then looked at how to use flickrgeo.php, a server-­side proxy to search photos in Flickr. You then set up a simple client-­side framework that we transformed one step at a time into a mashup between Flickr and Google Maps. Finally, you refactored that work into a Flickr/Google mapplet to create a pure client-­side solution.

Although this chapter focused on Flickr and Google Maps, what you learned in this chapter can be generalized for other mashups. For instance, you’ll continue to see repeated interactions between server-­side and client-­side components. Building mashups in controlled steps, adding functionality one piece at a time, is a good way to work. Frameworks such as Google Mapplets let you write widgets in HTML and JavaScript by providing server-­side proxies to access web services from other parties (such as the _IG_FetchContent() method in Google Mapplets).

When creating mashups, you are often faced with issues of “impedance matching”—that is, how to translate information from one source into a form that is usable by the consumer of that information. In this chapter, we focused on extracting geocoding information from Flickr and then translating it for use by Google Maps. Data flow went the other way too: how to get the viewport of the Google map to define the bounding box for a query for geotagged photos in Flickr. You will see the need to deal with impedance matching throughout the rest of the book.