Hacking Google Maps and Google Earth (ExtremeTech)

(Dana P.) #1

Chapter 14 — Merging with Flickr Photos 283


<photo id=”24910877” owner=”54256647@N00” secret=”8c15a21389” server=”23” ;
title=”STA_0724” ispublic=”1” isfriend=”0” isfamily=”0”/>
...
<photo id=”24865509” owner=”54256647@N00” secret=”53e7584368” server=”23” ;
title=”IMG_0713” ispublic=”1” isfriend=”0” isfamily=”0”/>
<photo id=”24865497” owner=”54256647@N00” secret=”4c6f065c3d” server=”23” ;
title=”IMG_0729” ispublic=”1” isfriend=”0” isfamily=”0”/>
<photo id=”24865488” owner=”54256647@N00” secret=”155fc590f0” server=”23” ;
title=”IMG_0709” ispublic=”1” isfriend=”0” isfamily=”0”/>




The photo idis the unique identifier for each photo. The owneris the username of the user
that owns the photos. The secretand servervalues are provided to enable you to display
an image in a web page. You don’t need the secretand servervalues to provide a link to
the Flickr page for the image. However, you do need this information if you want to display
only the image in a web page. You also need this information when you want to select alterna-
tive sizes or formats for an image.


In these applications, the photos are being retrieved as part of a Google Map. As you know,
photos that have geographical information have a specific tag. To retrieve photos suitable for
display on the map, you need to search for photos with the tag geotagged.


Using the REST interface, you can search for geotaggedphotos using this URL:


http://maps.mcslp.com//examples/ch14-02flickrproxy.pl?method= ;
flickr.photos.search&api_key=XXX&user_id=54256647@N00&tags=geotagged


This returns the following XML:




title=”IMG_0776” ispublic=”1” isfriend=”0” isfamily=”0”/>
title=”STA_0724” ispublic=”1” isfriend=”0” isfamily=”0”/>


You can parse this information within JavaScript and your Google Map page using the built-in
DOM parser.


Parsing the Response in JavaScript


To parse the data you need to create a generic XMLHttpRequest()object to download the
XML and parse the contents. Following is the code for this:


function loadPhotos() {
photoids = [];
geopoints = [];
map.clearOverlays();


var request = new XMLHttpRequest();

request.open(‘GET’,
Free download pdf