Orkut + OpenSocial + Google Gadgets + Google Map = Geolocate your Friends

for the past few days, i have been working hardly to get things working with OpenSocial API that Google has released last Thursday. I was trying integrating Google Maps, Orkut. i.e locating your friends in the World Map powered by Google Map.

Geolocate my friends =
OpenSocial + Google Maps + orkut + Google Gadget

How did i get started?

  • Signup for Orkut Sandbox Access. You might get within 24 – 48 hours. some time you may not get. Don’t worry. wait for some more time
  • Read How To Build Your First Social Gadget, Google Gadgets Getting Started
  • If you have greater Internet Bandwidth speed, Use Google Gadgets Editor online. You need to be logged in to use it. The Built-In preview in the editor doesn’t work because all OpenSocial app will run only on OpenSocial Container like Orkut Sandbox, Ning etc
  • Once you got the Orkut Sandbox access, login into it, hope you have now written few lines of OpenSocial code after reading above mentioned articles. Save it. On the right side of the editor, you would see the file name you are editing. Right click that link and select copy location. This is your module :)
  • Open social app

  • Login to Orkut Sandbox, click on Application link, then give the module URL which you copied just now and click add application.
  • On the left side bar, you would see your Application name which you had given in the module file i.e xml file

My Orkut Application : Geolocate my friends
Geolocate my friends

What do you need?
You need to have knowledge about

  • Javascript (if you are going to use Javascript API which is only available now)
  • Javascript Object Notation (JSON)
  • Basic working knowledge of Google Gadgets

How OpenSocial App fits into Orkut?
Most OpenSocial application runs in an Iframe in orkut. i do not know about other containers like Ning which i haven’t tried.

Development Tips

  • Orkut Sandbox have cache problem. so clear the cache by adding &bpc=1 when loading the application i.e clicking on the application name on the left sidebar.
  • Use Firebug for faster debugging of JSON, Posts.

Geolocate My Friends App OpenSocial Code
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<Module>
<ModulePrefs title=”Geolocate my friends” height=”500″ width=”700″>
<Require feature=”opensocial-0.5″ />
<Require feature=”dynamic-height”/>
</ModulePrefs>
<Content type=”html”>
<![CDATA[
<script type=”text/javascript” src=”http://www.google.com/jsapi?key=ABCDEFG”></script&gt;
<script type=”text/javascript”>
google.load(“maps”, “2.x”);
var map = null;
// Call this function when the page has been loaded
function initialize() {
map = new google.maps.Map2(document.getElementById(“map”));
map.setCenter(new google.maps.LatLng(34,0), 2);
map.addControl(new google.maps.LargeMapControl());
map.addControl(new google.maps.MapTypeControl());
map.setMapType(G_NORMAL_MAP);
getData();
}

function getData() {
var myparam = {“profileDetail”: ‘contact’};
//document.getElementById(‘message’).innerHTML = ‘Requesting friends…';
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(‘VIEWER’,myparam),”viewer”);
req.add(req.newFetchPeopleRequest (‘OWNER_FRIENDS’), ‘viewer_friends’);
req.send(onLoadFriends);
};

function onLoadFriends(data) {
var viewer = data.get(“viewer”).getData();
var name = viewer.getDisplayName();
var thumb = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
var profile = viewer.getField(opensocial.Person.Field.PROFILE_URL);
var geo_approx_lat = viewer.obj_.Keywords[1].Value;
var geo_approx_long = viewer.obj_.Keywords[2].Value;
profile = ‘http://sandbox.orkut.com&#8217; + profile;
var html = ‘<img src=”‘ + thumb + ‘”/>';
html += ‘<a href=”‘ + profile + ‘” target=”_top”>’ + name + ‘</a>’ + ” lat ” + geo_approx_lat + “long ” + geo_approx_long;
onefriend = name + ‘<br><img src=”‘ + thumb + ‘” alt=”‘+name+'” title=”‘+name+'”/>';

var blueIcon = new google.maps.Icon(G_DEFAULT_ICON);
blueIcon.image = “http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png&#8221;;
markerOptions = { icon:blueIcon };
var point = new google.maps.LatLng(geo_approx_lat,geo_approx_long);
var marker = new google.maps.Marker(point,markerOptions);
map.addOverlay(createMarker(point,onefriend));

var viewer_friends = data.get(“viewer_friends”).getData();
viewer_friends.each(function(person) {
var name = person.getDisplayName();
var thumb = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
var profile = person.getField(opensocial.Person.Field.PROFILE_URL);
var geo_approx_lat = person.obj_.Keywords[1].Value;
var geo_approx_long = person.obj_.Keywords[2].Value;
var point = new google.maps.LatLng(geo_approx_lat,geo_approx_long);
var marker = new google.maps.Marker(point);
profile = ‘http://sandbox.orkut.com&#8217; + profile;
html += ‘<a href=”‘ + profile + ‘” target=”_top” style=”float:left”>';
html += ‘<img src=”‘ + thumb + ‘”/>';
html += ‘</a>';
onefriend = name + ‘<br><img src=”‘ + thumb + ‘” alt=”‘+name+'” title=”‘+name+'”/>';
map.addOverlay(createMarker(point,onefriend));
});
//document.getElementById(‘message’).innerHTML = html;
}

function createMarker(point, msg) {
var marker = new google.maps.Marker(point);
google.maps.Event.addListener(marker,”click”, function() {
msg =”<p style=’font-size:11px;font-family:Verdana, Sans, Helvetica;’>”+msg+”</p>”;
map.openInfoWindowHtml(point, msg);
});
return marker;
}

google.setOnLoadCallback(initialize);
</script>
<div id=”map” style=”height: 98%; width: 98%;border: solid 1px #000000″></div>
<div id=”message”> </div>
]]>
</Content>
</Module>

If you have any Tips and Tricks, please comment it. Lets make the web a better social :)
You can add my app to your application list .
copy http://hosting.gmodules.com/ig/gadgets/file/106249497187797012507/balahello.xml and paste in your add application url. thats it!!

About these ads

12 thoughts on “Orkut + OpenSocial + Google Gadgets + Google Map = Geolocate your Friends

  1. Hi,

    Congratulation !
    I have installed your application
    http://sandbox.orkut.com/Application.aspx?uid=13710405601564910921&appId=430609281177&bpc=1

    But now I don’t understand where you take friend location :
    var geo_approx_lat = person.obj_.Keywords[1].Value;
    var geo_approx_long = person.obj_.Keywords[2].Value;
    Where are Keywords in my profile ?

    And let be friend to test it !
    And check my Web site http://www.osocial.net to follow and share OpenSocial news and applications

    Victor

  2. hi victor,
    if you take a look at the returned JSON string, you might find the latitude and longitude which is stored in the person objects. Keywords[1] represents the latitude and Keywords[2] represents the longitude.
    -bala

  3. @rkarthick: after i developed with opensocial, i came to know about this url. before that i never seen anywhere. and also it doesnt show Indian friends location which i am trying to solve.

  4. This is great stuff Bala …

    I just added your app and will write an app soon for Muziboo.com

    Out of the list you have suggested, I lack an understanding of JSON .. so will have to read something about it. I am waiting for someone to come out with a rails plugin or something ;)

    Regards
    Prateek Dayal
    Muziboo.com

  5. rascunho » Blog Archive » links for 2007-11-11

  6. Great Work Bala… This will be really a great starting point for many OS Developers.

    I am trying to put bolts and nuts in a place to get my app ready which I am doing for myProdoktSpace.com

    Also I have created a forum called http://www.indiaopensocial.org/

    It will be great if we all can share all the information that we have learnt which will help rest of opensocial community

    Kumaran

  7. how can i send request to add my application to my friends ? can i send any message to my friend’s inbox ? can anyone help me out?

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s