trieu Posted September 20, 2012 Share Posted September 20, 2012 (edited) 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 September 20, 2012 by trieu Link to comment Share on other sites More sharing options...
justsomeguy Posted September 20, 2012 Share Posted September 20, 2012 It looks like you can use this API method to get photos for a given location: http://www.flickr.com/services/api/flickr.photos.geo.photosForLocation.html Link to comment Share on other sites More sharing options...
trieu Posted September 21, 2012 Author Share Posted September 21, 2012 Hey thanks for that! but i was wondering if you would be able to run me through on how to implement this into my code?? I've never really worked with API's before to be honest and i'm not too sure on where to begin! Thanks again Link to comment Share on other sites More sharing options...
justsomeguy Posted September 25, 2012 Share Posted September 25, 2012 I would start here, with the links in the gray box. There are links inside those guides to the FAQ and community groups. http://www.flickr.com/services/api/ Link to comment Share on other sites More sharing options...
trieu Posted September 29, 2012 Author Share Posted September 29, 2012 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 More sharing options...
justsomeguy Posted October 1, 2012 Share Posted October 1, 2012 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now