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 =
+ + +

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 🙂



• 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

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!!