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.