HTML and CSS Reference
In-Depth Information
position.coords.longitude + '&radius 2&extras geo%2Curl sq&format
json&jsoncallback apiCallback&per page 20';
Mit den Ergebnissen von der Flickr-API wird dann in einem Fotocontainer für jedes
empfangene Bild ein Thumbnail angezeigt:
imgElement document.createElement('img');
imgElement.src photos[i].url sq
imgElement.hspace 5
imgElement.vspace 5
imgElement.alt photos[i].title;
photoContainer.appendChild(imgElement);
Und dazu wird pro Foto noch eine Markierung auf die Google Maps-Karte gesetzt:
new google.maps.Marker({
position: new google.maps.LatLng(photos[i].latitude,
photos[i].longitude),
map: $i.map,
title: photos[i].title});
Insgesamt ist das One-Shot-Beispiel nur um wenige Zeilen Code erweitert worden,
bietet aber auf einmal nicht nur eine Landkarte, sondern auch völlig neue und relevante
Inhalte. Nach dem Aufrufen der Webseite wird erst die Position des Benutzers abgefragt.
Anschließend wird die Google Maps-Karte angezeigt, die Flickr-API aufgerufen und
abhängig von den zurückkommenden Daten pro Bild ein kleines Thumbnail gezeigt
sowie eine Markierung auf die Google-Karte gesetzt. Hier ist das Ergebnis in Form einer
kompletten ausgeklappten Seite:
Bild 2.56:
Mash-up von Flickr-Fotos und Google Maps
anhand der aktuellen Position eines Benutzers.
