Contact Grabber

Contact Grabber is an application to fetch contacts (i.e.) Address book  from variuos email providers and social networking sites such as Yahoo, Gmail, AOL, Hotmail, Orkut, Facebook, bebp etc. Here i have given some examples.

Plaxo

plaxo

We know Plaxo is social networking service but Plaxo also provides automatic updating of contact information. Plaxo contact grabber is javascript widget which is very simple to implement in oyur web page. The Widget allows them to access their complete address book directly from your site. It grabs contact from Hotmail, Outlook, Yahoo, Plaxo, Gmail etc.

URL: www.plaxo.com
API: www.plaxo.com/api/widget

Open Inviter

Open InviterOpen Inviter is a free open source contact grabber from email providers like AOL, GMail, Yahoo, Rediff etc nearly 57 and from social networks like Orkut, Facebook, Hi5 nearly 47. This is not a widget like plaxo.

URL: www.openinviter.com

DEMO: www.openinviter.com/demo/

Download: www.openinviter.com/download.php

Example: www.phpclasses.org/browse/package/4927.html

(This example has nearly 20 plugins such as AOL, Gmail, Yahoo, Orkut, Facebook etc.)

Find Latitude and Longitude of a Location: Google Map API

Recently I handled a project that required map location (Latitude and Longitude) based on radius from a user defined point. The user enter the location (i.e.) Country, State, City with in a certain miles or kilometers (10, 20, 50, 500…. Any) are found from the database.

This solution uses Google map API. Already we have seen some posts regarding Google map API. This is a another example to find the latitude and longitude according to the location.

Example, While registration of a user i’ll store the latitude and longitude of a user. For that,

Location

Location

From the above location we are going to find the latitude and longitude,


function storeMapValue()
{
   var state = document.getElementById("state").selectedIndex;
   var country = document.getElementById("country").selectedIndex;
   var city = document.getElementById("city").selectedIndex;

   var value = document.getElementById("city").options[city].text+
        ","+document.getElementById("state").options[state].text+
        ","+document.getElementById("country").options[country].text;
   alert(value); // Madurai,Tamil Nadu, India
   var add = new showAddress(value); // Sending the location to
   another function
}
var map = null;
var geocoder = null;

function showAddress(address)
{
   geocoder = new GClientGeocoder();
   geocoder.getLocations(address,function(point)
   {
       if (!point)
       {
          alert(address + " not found");
       }
       else
       {
          place=point.Placemark[0]; // if you alert place
          get [object] [object]
          point=new GLatLng(place.Point.coordinates[1],
          place.Point.coordinates[0]); //Spliting the latitude and
          longitude

          document.getElementById("lat").value =
          place.Point.coordinates[1];
          document.getElementById("lang").value =
          place.Point.coordinates[0];
          //Storing the latitude and longitude in a textbox may
            be hidden.
       }
    });
}

By using the sql query in the previous post we can calculate the distance beetween the two locations. This module is mainly used for searching.

Calculate Distance using Latitude and Longitude: PHP & Mysql

This is a Geographic calculations to find the distance between two locations. If you remember the claculation of distance between two points, it was simply the hypotenuse of a triangle (A² + B² = C²), but it doesn’t apply with Geography since the distance between lines of latitude and longitude are not an equal distance apart. If you use some kind of simple triangulation equation, it may measure distance accurately in one location and terribly wrong in the other, because of the curvature of the Earth.

Anyways, here’s the PHP formula for calculating the distance between two points (along with Mile vs. Kilometer conversion) rounded to two decimal places:

function getDistanceBetweenPointsNew($latitude1, $longitude1,
$latitude2, $longitude2, $unit = 'Mi')
{
   $theta = $longitude1 - $longitude2;
   $distance = (sin(deg2rad($latitude1)) *
   sin(deg2rad($latitude2))) + (cos(deg2rad($latitude1)) *
   cos(deg2rad($latitude2)) * cos(deg2rad($theta)));
   $distance = acos($distance);
   $distance = rad2deg($distance);
   $distance = $distance * 60 * 1.1515;
   switch($unit)
   {
      case 'Mi': break;
      case 'Km' : $distance = $distance *1.609344;
   }
   return (round($distance,2));
}

It’s also possible to use MySQL to do a calculation to find all records within a specific distance. In this example, I’m going to query MyTable to find all the records that are less than or equal to variable $distance (in Miles) to my location at $latitude and $longitude:

$qry = "SELECT *,(((acos(sin((".$latitude."*pi()/180)) *
sin((`Latitude`*pi()/180))+cos((".$latitude."*pi()/180)) *
cos((`Latitude`*pi()/180)) * cos(((".$longitude."- `Longitude`)*
pi()/180))))*180/pi())*60*1.1515) as distance FROM `MyTable`
WHERE distance <= ".$distance."

For Kilometers:

$qry = "SELECT *,(((acos(sin((".$latitude."*pi()/180)) *
sin((`Latitude`*pi()/180))+cos((".$latitude."*pi()/180)) *
cos((`Latitude`*pi()/180)) * cos(((".$longitude."- `Longitude`)
*pi()/180))))*180/pi())*60*1.1515*1.609344) as distance FROM
`MyTable` WHERE distance <= ".$distance." 

Google AJAX Search API

Google AJAX Search API lets you to create Google search in your own websites with javascript. You can embed a simple, dynamic search and display the search result in your own web pages.
There are three types of searches they are,

  • Web Search.
  • Local Search.
  • Multimedia Search.

Web Search

You can embed web search, blog search and news search into your own website or blogs.

Code

<html> 
  <head> 
    <title>Google AJAX Search API Sample</title> 
    <style type="text/css"> 
    body {
      background-color: white;
      color: black;
      font-family: Arial, sans-serif;
      font-size : 13px;
      margin: 15px;
     }
   #searchcontrol .gsc-control { width : 400px; }
   </style> 
 </head> 
 <body> 
    <div id="searchcontrol">Loading</div> 
 </body> 
</html>
<script src="http://www.google.com/jsapi" type="text/javascript">
</script> 

<script type="text/javascript"> 
google.load('search', '1.0'); 
function OnLoad()
{ 
      // Create a search control 
      var searchControl = new google.search.SearchControl(); 

      // Add in a full set of searchers 
      var localSearch = new google.search.LocalSearch(); 
      searchControl.addSearcher(localSearch); 
      searchControl.addSearcher(new google.search.WebSearch()); 
      searchControl.addSearcher(new google.search.BlogSearch()); 
      searchControl.addSearcher(new google.search.NewsSearch()); 
      searchControl.addSearcher(new google.search.BookSearch()); 
      searchControl.addSearcher(new google.search.PatentSearch()); 
 
      // Set the Local Search center point 
      localSearch.setCenterPoint("India, IND"); 

      /* tell the searcher to draw itself and tell it where to 
attach */
      searchControl.draw(document.getElementById("searchcontrol")); 

      // execute an inital search 
      searchControl.execute("India"); 
} 
google.setOnLoadCallback(OnLoad, true); 
</script>

(Copy & paste in .html file)

Output Screenshot

Web Search

Web Search

 Local Search

If you already have a google Map application and wants to add search capabilities the local search makes you more ease.

Code

<html>
 <head>
  <title>Local Search</title>
 </head>
 <body>
  <div id="content">Loading....</div>
 </body>
</html>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("maps", "2");
google.load("elements", "1", {packages : ["localsearch"]});
function OnLoad()
{
    var content = document.getElementById("content");
    /*setting height and width for the div tag where the map
displays*/
    content.style.border = "1px solid #979797";
    content.style.height = "350px";
    content.style.width = "500px";

    var map = new google.maps.Map2(content);
    map.setCenter(new google.maps.LatLng(9.999958, 78.155365), 11);
    var lsc = new google.elements.LocalSearch();
    map.addControl(lsc);
}
google.setOnLoadCallback(OnLoad);
</script>

(Copy & paste in .html file)

Output Screenshot

Local Search

Local Search

Multimedia Search

Multimedia search is as similar as Web search, there we have created a object for the class i.e.

var searchControl = new google.search.SearchControl();

then we added the searches such as,

searchControl.addSearcher(new google.search.WebSearch()); 
searchControl.addSearcher(new google.search.BlogSearch()); 

similarly for image and video search, just add the below searchers,

searchControl.addSearcher(new google.search.VideoSearch()); 
searchControl.addSearcher(new google.search.ImageSearch());

More Examples

Google Chart API

Google Chart

Google Chart

Google Chart API

The Google Chart API is extremely simple tool that lets you easily create a chart from dynamically generated data and embed it in a webpage. The data and formatting parameters were embedded in HTTP request. The Google Chart API returns a PNG-format image in response to the url.

Links

Home Page: http://code.google.com/apis/chart/.

Chart Types

  • Line Charts.
  • Bar Charts.
  • Pie Charts.
  • Venn Diagrams.
  • Scatter Plots.
  • Radar Charts.
  • Maps.
  • Google-o-meters.
  • QR Codes.

Images can be generated for all types of chart, for each image you can specify attributes such as color, labels and size.

The url must be in following format:

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

Parameters are separated using ampersand. n number of parameters can be specified in any order.

For Example

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40,60&chs=250×100&chl=Yesterday|Today|Tomorrow

The generated PNG-format will be,

Chart

Chart

For more details regarding attributes and charts.

Google Map API

Google Map

Google Map

Google Maps API

It provides an Application Programming Interface to use the tool on any website. Google Maps uses JavaScript extensively. To use this you should be familiar in JavaScript. By using the Google Maps API, it is possible to embed the full Google Maps into an external website. The Maps API is a free service, available for any web site that is free to consumers.

Links

Home Page: http://code.google.com/apis/maps/
Documentation: http://code.google.com/apis/maps/documentation/
Demos: http://code.google.com/apis/maps/documentation/demogallery.html
Examples: http://code.google.com/apis/maps/documentation/examples/index.html

While Integrating Google Maps in your website, you should use the API key which will be provided by the google. The API key will be unique for each and every domain. Sign for the Google Maps API

For example The API for http://localhost/ will be,

ABQIAAAAkGMwVXYXPd1ca9opxkmJeRT2yXp_ZAY8_ufC3CFXhHIE1N
vwkxQ-135Pijwz1dke1QlhBlEzIQPfbQ

Within the JavaScript Maps API, place the key within the script tag when you load the API:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;
sensor=true_or_false&amp;
key=ABQIAAAAkGMwVXYXPd1ca9opxkmJeRT2yXp_ZAY8_ufC3CFXhH
IE1NvwkxQ-135Pijwz1dke1QlhBlEzIQPfbQ"
type="text/javascript">
</script>

Simple Map Example

Code:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Map</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;
sensor=false&amp;
key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDV
G8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>

<script type="text/javascript">
function initialize()
{
    if (GBrowserIsCompatible())
    {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(9.999958,78.155365), 13);
        map.setUIToDefault();
    }
}

</script>
</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>

(Copy and paste this in a .html file)

Map:


View Larger Map

For more Examples

Javascript Frameworks

1. script.aculo.us (http://script.aculo.us/)

scriptaculous

scriptaculous


URL: http://script.aculo.us/.
Documentation: http://wiki.script.aculo.us/.
Blog: n/a.
Note: script.aculo.us is not a Framework by its self, it is an addon for Prototype.

2. Prototype (http://www.prototypejs.org/)

Prototype

Prototype


URL: http://www.prototypejs.org/.
Documentation: http://www.prototypejs.org/learn.
Blog: http://www.prototypejs.org/blog.

3. Moo Tools (http://www.mootools.net/)

Mootools

Mootools


URL: http://www.mootools.net/.
Documentation: http://docs.mootools.net/.
Blog: http://blog.mootools.net/.
Demos:http://demos.mootools.net/.

4. jQuery (http://jquery.com/)

Jquery

Jquery


URL: http://jquery.com/.
Documentation: http://docs.jquery.com/.
Blog: http://jquery.com/blog/.

5. YUI (http://developer.yahoo.com/yui/)

YUI

YUI


URL: http://developer.yahoo.com/yui/.
Examples&Gallery: http://developer.yahoo.com/yui/examples/.
Blog: http://yuiblog.com/.