Google Map and Instagram Mashup

This is interesting maspus using the two popular api ie instagram media search and google map.This project uses the map as to set the location and using this location it search the image media recently uploaded on instagram.

1. Creating a google map : You can refer to your previous tutorials for getting start with google map.

2. Creating an Instagram App:

Follow these simple steps to get your own key.

• 1. Login if your not already.
• 2. Go to the Instagram Developer page.
• 3. Click on ”Register your application”.
• 4. If you don’t already have a application registered, you will now see a form to register a new one. If you instead see a list of ”clients”, click the ”Register new client” at the top right.
• 5. Set application name to your websites name
• 6. Type in a description, something like ”Registering to get a client ID
• 7. Add the url of you site on the two last fields.
• 8. Hit register.
• 9. Click ”Manage clients” in the top menu and you will now see you new client in the list and a client id, client secret and more.
• 10. Save and you are ready to use the Instagram API to search after images directly on Instagram.

Here is the java file to generate the request url for location based media search on Instagram.

[code lang=”js”]
package org.aynsoft.javafile;

import android.app.Activity;
import android.util.Log;

import com.google.android.gms.maps.model.LatLng;

public class Utils {

private static final String APIKEY="2f8a844330444c97a6d71cf882e19964";

private static Utils utils;
private Utils() {

}

public static Utils getInstance(){
if(utils==null){
utils=new Utils();
return utils;
}
return utils;
}

public String getUrlForMediaSearch(LatLng latlng){
String url="https://api.instagram.com/v1/media/search?" +
"lat=" +latlng.latitude+
"&lng=" +latlng.longitude+
"&client_id="+APIKEY;
Log.i("Search Url",""+url);
return url;
}

public void fetchVideoResult(LatLng arg0,Activity activity){
LoadVideos loader=new LoadVideos(activity);
loader.execute(Utils.getInstance().getUrlForMediaSearch(
arg0));
}
}
[/code]

3. A Dive into App: When the app first launch it show the media result on the bases of the current location of the user. An HTTP GET request is generated to get the media from the server.An Instagram generate the json responce of the request.Then wee need to parse that responce using the JSON parser.For holding the data of the media we create a POJO class.

Image.java

[code lang=”js”]
package org.aynsoft.javafile;

public class Image {

String mIconUrl;
String sIconUrl;

public String getmIconUrl() {
return mIconUrl;
}
public void setmIconUrl(String mIconUrl) {
this.mIconUrl = mIconUrl;
}
public String getsIconUrl() {
return sIconUrl;
}
public void setsIconUrl(String sIconUrl) {
this.sIconUrl = sIconUrl;
}
}
Parser.java
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

import org.json.JSONArray;
import org.json.JSONObject;

import android.annotation.SuppressLint;
import android.util.Log;

public class Parser {

private final String KEY_DATA="data";
private final String KEY_IMAGES="images";
private final String KEY_IMG_LOW="low_resolution";
private final String KEY_IMG_HIGH="standard_resolution";
private final String KEY_IMG_URL="url";
private final String KEY_ID="id";

public volatile boolean parsingComplete = true;

@SuppressLint("NewApi")
public List<Image> getVideoContent(String URL) {
String in=fetchJSON(URL);
List<Image> videoList=new ArrayList<Image>();
try {
JSONObject reader = new JSONObject(in);
JSONArray resultArray=reader.getJSONArray(KEY_DATA);
Log.i("Size",""+resultArray.length());
if(resultArray.length()>0){
for(int i=0;i<resultArray.length();i++){
Image video=new Image();
JSONObject itemObject=resultArray.getJSONObject(i);
JSONObject imgObject=itemObject.getJSONObject(KEY_IMAGES);
video.setmIconUrl(imgObject.getJSONObject(KEY_IMG_LOW).getString(KEY_IMG_URL));
video.setsIconUrl(imgObject.getJSONObject(KEY_IMG_HIGH).getString(KEY_IMG_URL));
videoList.add(video);
}
}
parsingComplete = false;

} catch (Exception e) {
e.printStackTrace();
}
return videoList;

}

public String getLocationID(String URL) {
String in=fetchJSON(URL);
String ID=null;
try {
JSONObject reader = new JSONObject(in);
JSONArray resultArray=reader.getJSONArray(KEY_DATA);
if(resultArray.length()>0){
JSONObject obj=resultArray.getJSONObject(0);
ID=obj.getString(KEY_ID);
}
parsingComplete = false;

} catch (Exception e) {
e.printStackTrace();
}
return ID;

}

public String fetchJSON(String URL) {
try {
URL url = new URL(URL);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setReadTimeout(10000 /* milliseconds */);
conn.setConnectTimeout(15000 /* milliseconds */);
conn.setRequestMethod("GET");
conn.setDoInput(true);
// Starts the query
conn.connect();
InputStream stream = conn.getInputStream();
String data = convertStreamToString(stream);
stream.close();
return data;
} catch (Exception e) {
e.printStackTrace();
}
return null;

}

static String convertStreamToString(java.io.InputStream is) {
java.util.Scanner s = new java.util.Scanner(is).useDelimiter("\\A");
return s.hasNext() ? s.next() : "";
}
}
[/code]

In this way we got the data from Instagram from the corresponding location.

This is just the code snippet you can download the full source code of the app here.