Google Map – Facebook Mashup!!!
In recent days i have seen a lot of sites which offer mashups between Google Maps and a whole host of sites such as facebook,twitter..etc .With Open APIs available for most of these sites, it is fairly easy to create your own applciation for these sites as well as mashups of two or more such sites.In my spare time i’m writing a facebook application which can show different types of relevant infromation using Google Maps.I’ve started off by writing a simple script which reads through a facebook user’s friend’s list, gets their hometown location and displays it on a webpage using Google Maps.Using the relevant geocoding APIs ,i have converted the hometown location into lattitude,longitude pairs which can then be used to easily display the location on the Map.The application uses the following facebook APIs
- users.getInfo
- friends.get
Once the php script gets these details, it generates a html file with these details and scripts required to display the hometown location on Google Maps.Although Google advises us to use the http script to geocode a large number of addresses, in the case of this application it makes sense to do this on the client end(javascript) rather than using the http script on the server end since there are restrictions on the number of times an API can be called from one location.
Check out the application i’ve written here … Mashup App
And here is the code below..You can also download the script file here
Feel free to use this and make your own Mashup.
</code></code></code>
<?php
require_once 'facebook.php';
$appapikey = '68a8d665d75f6d2278be2770aeb40443';
$appsecret = 'bfe475cf318a1d1594e260d350907729';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();
$usr_details=$facebook->api_client->users_getInfo($user_id, 'last_name, first_name,hometown_location,pic_small');
$usr_fname = $usr_details[0]['first_name'];
$usr_lname= $usr_details[0]['last_name'];
$usr_hometown=$usr_details[0]['hometown_location'];
$usr_picurl=$usr_details[0]['pic_small'];
$usr_city=$usr_hometown['city'];
$usr_cityu=urlencode($city);
$friends = $facebook->api_client->friends_get();
$countFull=count($friends);
$friends = array_slice($friends, 0, 30);
$details=array();
$fnames=array();
$lnames=array();
$lats=array();
$longs=array();
$picurls=array();
$countFriend=count($friends);
$citys=array();
foreach ($friends as $friend)
{
$user_details = $facebook->api_client->users_getInfo($friend, 'last_name, first_name,hometown_location,pic_small');
array_push($details,$user_details);
$fname = $user_details[0]['first_name'];
$lname= $user_details[0]['last_name'];
$hometown=$user_details[0]['hometown_location'];
$picurl=$user_details[0]['pic_small'];
$city=$hometown['city'];
if( !empty($city))
{
array_push($fnames,$fname);
array_push($lnames,$lname);
array_push($citys,$city);
array_push($picurls,$picurl);
}
}
$jfnames=implode("','",$fnames)."'";
$jlnames=implode("','",$lnames)."'";
$jlats=implode("','",$lats)."'";
$jlongs=implode("','",$longs)."'";
$jpicurls=implode("','",$picurls)."'";
$jcitys=implode("','",$citys)."'";
$countFr=count($citys);
$count2=count($details);
echo"<html xmlns='http://www.w3.org/1999/xhtml' xmlns:v='urn:schemas-microsoft-com:vml'>";
echo"<head>";
echo"<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"/>";
echo"<title>Facebook-Google Map Mashup!!!</title>";
echo"<script src=\"http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAAyd184tYKKI0_TnY71USZSxQxJc18Bhr9jSaEXADRoQiZhK0BSRQebxnOCNFjQF3XxanBqQ0VCYr63Q\"
type=\"text/javascript\"></script>";
echo" <script type=\"text/javascript\">";
echo"var fnames;";
echo"var lnames;";
echo"var citys;";
echo"var picurls;";
echo"var lats;";
echo"var lons;";
echo"var map;";
echo"var geo;";
echo" function initialize() {";
echo" if (GBrowserIsCompatible()) {";
echo" map = new GMap2(document.getElementById(\"map_canvas\"));";
echo" map.setCenter(new GLatLng(19.0176560,72.8561780,true), 2);";
echo" map.addControl(new GSmallMapControl());";
echo" map.addControl(new GMapTypeControl());";
echo" fnames=new Array('".$jfnames.");";
echo" lnames=new Array('".$jlnames.");";
echo" citys=new Array('".$jcitys.");";
echo" picurls=new Array('".$jpicurls.");";
echo" geo=new GClientGeocoder();";
echo" lats=new Array(".$countFr.");";
echo" lons=new Array(".$countFr.");";
echo" }";
echo" }";
echo"var arraay=".$count2.";";
echo"function process(city,index){";
echo" geo.getLatLng(city,function(result){";
echo" if(result){";
echo" lats[index]=result.lat();";
echo" lons[index]=result.lng();";
echo" var fnamelname=\"'\"+fnames[index]+ ' ' +lnames[index] + \"'\" ;";
echo" var opt={};";
echo" var new_icon = new GIcon(); ";
echo" new_icon.image = picurls[index]; ";
echo" new_icon.size = new GSize(8,8);";
echo" new_icon.iconAnchor = new GPoint(8,9) ;";
echo" new_icon.infoWindowAnchor = new GPoint(7,7) ;";
echo" opt.icon = new_icon ; ";
echo" opt.draggable = true ;";
echo" opt.title=fnamelname;";
echo" var mark= new GMarker(new GPoint(lons[index],lats[index]),opt);";
echo" map.addOverlay(mark);";
echo" }";
echo" });";
echo"}";
echo"function ShowFriends(){";
echo" for(var pp=0;pp<".$countFriend.";pp++) {";
echo" process(citys[pp],pp),3000*(pp+1);";
echo" }";
echo"}";
echo"</script>";
echo"</head>";
echo"<body onload=\"initialize()\" onunload=\"GUnload()\">";
echo"Hi ".$usr_fname." ".$usr_lname." !!! , You have ".$countFull." friends<br>";
echo " Click on the button below to see a few of your friend's hometown location<br>";
echo"<input type=\"button\" onclick=\"ShowFriends()\" value=\"Locate Friends\" />";
echo"<div id=\"map_canvas\" style=\"width: 1024px; height: 768px\"></div>";
echo"</body>";
echo"</html>";