Jump to content

Plotting Flickr geo tags to google maps?


trieu
 Share

Recommended Posts

Hey guys, I was wondering how i would plot the geo locations from flickr images, specifically in the "wellington, new zealand" region onto a google map?? I've seen some examples which sort of do it, but you have to enter your search parameters, such as... http://loc.alize.us/ I've managed to set up a google map that automatically sets itself to the "wellington" region but im not sure how to plot the points?? To take it even further, i was wondering if when you hover over the image would load say to the left of the page rather than tool tip, and hover over?? I've used this so far and managed to plot a specific point...https://developers.google.com/maps/documentation/javascript/overlays#Markers but now i need to somehow implement this..http://www.flickr.com/services/api/flickr.photos.getExif.htmlbut im not too sure how! Thanks in advance for any help you can give :)

Edited by trieu
Link to comment
Share on other sites

Hi!Sorry for the late reply! I have been busy trying to figure out the Flickr API! this is the code i have so far...

<!DOCTYPE html><html><head><style type="text/css">  body { background-color: grey; font-family: arial; }  #flickrFeed { width: 400px; background-color: white; border-radius: 10px; padding: 15px; }</style></head><body><div id="flickrFeed"></div><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script><script type="text/javascript">  var methodData = { method: "flickr.photos.search", api_key: "546f37e166db156dc56f56921adb5320", format: "json", nojsoncallback: "1"};	 $.getJSON("http://api.flickr.com/services/rest/", $.extend(methodData, { text: "cuba", lat: "-41.292527", lon: "174.776151", radius: "32" }), function(data) {   for (var i = 0; i < data.photos.photo.length; i++) {    var photo = data.photos.photo[i];    //url format: http://www.flickr.com/services/api/misc.urls.html    var photoUrl = "http://farm" + photo.farm + ".staticflickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg";    $("<strong>" + photo.title + "</strong><br/><img src='" + photoUrl + "'/><br/><br/>").appendTo("#flickrFeed");   }  });</script></body></html>

So i am able to pull up the list of images, however im not sure if it returns any information about the location itself to let me plot the points?? I was reading on another forum where it said i could just add the "extras = geo" function to the search and it would return the values...but once i have this, what is the technique i go about to plot the information on the google maps?? Sorry for the questions! im a bit new to coding so im unaware of most techniquesThank you again, D

Link to comment
Share on other sites

Use your browser's developer console to see what is being returned. There are links in my signature to descriptions about the developer consoles in various browsers. Send each photo to the console so that you can inspect it and see everything that it contains. var photo = data.photos.photo;console.log(photo); Or you can inspect the entire return object: console.log(data);

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...