Man Behind Google Map Marker .. the PIN you see on Maps ??

Click Like If you Agree

Google Map Marker or the small PIN we see on 
Google Maps when we search for a place . The small
tiny red colored oval marker that fits so well in the 
Google Maps .


Who Invented Google Map Marker or Google Map Pin??

Ji Lee the ex Creative Head Of Google was the man behind
this creative oval shaped Google Marker . Google initially 
came up with many different pointers like circles, squares
small sphere , but all of these overlays didn't create the charm 
that the pin shaped 45 degree pointer created .


Who is Ji Lee ?


Born in Seoul, Korea, and raised in São Paulo, 
Brazil, Ji Lee studied design at Parsons School
of Design . Ji Lee is currently working as the
Creative Director For Facebook after his exit
from Google . Ji LEE is also the man behind the
famous Google Bubble Project which spreaded like a
virus in the New York City .

Other :
If you are using Android smartphones this may be of Great Use to you .

Turn Your Digital Content into Apps for Android within an Hour!

Read more...

Google Latitude : Ruby on Rails Example using Oauth

Click Like If you Agree

Spent a few days searching for  Google Latitude example
RUBY on RAILS and I am happy to say finally found a
good post on Google Latitude . I thought it would be great
to include this one in  my blog as it already contained a lot of
stuff on Google Latitude .

Register Domain with Google


1) Go to: https://www.google.com/accounts/ManageDomains
    Add a domain name if you have or
    Get cheap and good web hosting ($7.99 per year)
    Thats the cheapest price you can get on the web with
    a large no of of features .
    Hosting Includes 99.9% Uptime, RV Site Builder, 
    Fantastico Deluxe Scripts, Softaculous Auto Script  
    Installer, Ruby On Rails, Ruby Gems, Virus Scanner,
    WHM cPanel w/ZamFoo 7.1, CGI, Perl, PHP 5, cURL &
    GD, suPHP. 
    
    They are not that famous I guess but definitely a good one. 

 










 After registering your domain , the next step is to create 
 an pair of RSA keys , this one is needed for encryption
 of the data to be send during the OAuth Handshake .


In linux and OS X you can use openssl
openssl req -x509 -nodes -days 365 -newkey rsa:1024 
-sha1 -subj ‘/C=US/ST=CA/L=San 
Francisco/CN=example.com’ -keyout rsakey.pem -out 
rsacert.pem

Upload the rsacert.pem, and keep the rsakey.pem in a

safe place.  For the Target URL path prefix, Just add 

the domain name. 

Get the Oauth Consumer Key and Secret .


2) OAuth GEM



Include in your environment.rb

config.gem "oauth"

You need to install it to use in your system .
Recommended version 0.4.1 .

3) Generate OAuth Access Toke Model 


$ ruby script/generate model OAuthAccessToken
Note: I've done this because I don't want to store 

my access token directly in my User model.  This

gives me the option of having tokens for multiple 

scopes for a user through a polymorphic association.

Migration:

create_table :oauth_access_tokens do |t|
      t.string  :oauth_token, :oauth_secret, :scope
      t.string  :subject_type, :limit > 30 #for polymorphic association
      t.integer :subject_id
      t.timestampsend  

4)User Model 


has_one  :latitude_access_token, 
:model_name => 'OAuthAccessToken',
:as => :subject, :conditions => ['scope = ?','latitude']


5)Setup OAUTH Consumer for Latitude


Create class lib/o_auth_consumers.rb


class OAuthConsumers  

  Latitude = OAuth::Consumer.new( CONSUMER_KEY, 

      CONSUMER_SECRET, {

      :site => "https://www.google.com",

      :request_token_path => "/accounts/OAuthGetRequestToken",

      :access_token_path => "/accounts/OAuthGetAccessToken",

      :authorize_path=> "/latitude/apps/OAuthAuthorizeToken",

      :signature_method => "RSA-SHA1",

      :private_key_file => "#{RAILS_ROOT}/config/rsakey.pem" 

       #path to my rsakey that I saved earlier

  }) 

end

Remember to change the CONSUMER_KEY and 

CONSUMER_SECRET which you got from step1.

6)Generate Controller for APP

ruby script/generate controller latitude

require 'oauth'

require 'oauth/signature/rsa/sha1'

class LatitudeController < ApplicationController

def index

    #check the user has a latitude oauth access token

    if current_user.latitude_access_token

      token = 

     OAuth::Token.new(current_user.latitude_access_token.oauth_token,     current_user.latitude_access_token.oauth_secret)

      @request = JSON.parse(OAuthConsumers::Google.request('get', "https://www.googleapis.com/latitude/v1/currentLocation", token).body)

      @lat = @request['data']['latitude']

      @lng = @request['data']['longitude']

      @time = Time.at((@request['data']['timestampMs'].to_i)

       /1000).strftime('%b %d, %Y - %T')

    else

      redirect_to :action => 'authorise'

    end

    

  end

 def authorise

 if !params[:oauth_token]

request_token = OAuthConsumers::Latitude.get_request_token(

{ :oauth_callback => "http://localhost:3000/latitude/authorise" },

{ :scope => "https://www.googleapis.com/auth/latitude" }

                        )

session[:oauth_secret] = request_token.secret

      redirect_to request_token.authorize_url + 

      "&domain=example.com&granularity=best&location=all"

      else

      request_token = OAuth::RequestToken.new(

                         OAuthConsumers::Latitude,

                         params[:oauth_token],

                         session[:oauth_secret]

                       )

 begin

        access_token = 

        request_token.get_access_token(

         :oauth_verifier => params[:oauth_verifier] )

        rescue

        redirect_to :action => 'index'

      end

if access_token

        #now save the access token for this user 

        OauthAccessToken.create :subject => current_user,

                                :scope => 'latitude',

                                :oauth_token => access_token.token,

                                :oauth_secret => access_token.secret

      end

   redirect_to latitude_path

    end

  end

  

end

7) Get the Latitude To Work 

That's pretty much it.  Go to http://localhost:3000/latitude,

you will be directed to Google to authorise your account, 

then once that all goes through, you will be sent back to 

your app, an Access Token will be created which will be 

stored for your user.  I'm not exactly sure how long this 

lasts at the moment, but I'm testing that right now and 

will update if I find anything important.

Thanks to Ben Petro for creating the code on Ruby On Rails 
 platform .

Read more...

Geocode Zip Code on Google Maps

Click Like If you Agree

 Enter 5 numbered US Postal Code 
                       Or Enter a address to geocode .
If you are using Google Chrome 11 or smartphone 
then you can use the microphone to speak out the Address.
It uses Google's Speech Recognition Tool .

Read more...

Google Chrome Speech Recognition mashup with Google Maps

Click Like If you Agree

Google see its browser as the central part of its future computing devices .

With Chrome OS to be released in US,UK ,India and other countries in 

around June 2011 , Google Chrome will be used for everthing from listening

to music to creating office documents .

The latest version of Google Chrome enables support for Speech Recognition,

based on HTML5 standards . You can now specify speech as one of your 

inputs in your HTML5 form , record what the user speaks and interpret it .

Speech Recognition is one of the widely unexplored fields and with Google

entering this field ,we will surely find many speech based API's in near future.

How Google Chrome Speech Recognition works ?

Even though there aren't much details on the web regarding the working 

of Google's Speech Recognition algorithm , it is roughly based on calculating

the MFCC co-efficient of each and every word  Google has in its database ,

when you speak a word and pass it to the Google Server to interpret ,it 

matches the MFCC of the word spoken by you with its database and returns

you the closest matching word from the database . What all words might 

Google have in its database ?? The greatest weapon Google has  is its data

that ranges from the Searching trends to Regional Searching data and this is

a one factor that will make it one of the top Speech Recognition Enterprise.

Google makes use of its huge database to give user specific speech to text

conversion based on the regional data it has .

How to use Google Speech Recognition in Google Maps Application ??

1. Create an input tag with text as type like this                                                                                 <input type="text" id="address" x-webkit-speech />    
2. Create an div in which your Google Map will be displayed .
3. Create function to geocode your address .
4. Create an marker to display the location on the map .

   

Complete code below is as follows 

<html> 

<head> 

<title>Google Speech Recognition Mashup Google Maps</title> 

<style>

#map_canvas {

  height: 400;

 width : 600

  }

</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 

 function initialize() {

   geocoder = new google.maps.Geocoder();

    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {

      zoom: 8,

      center: latlng,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  }

 function codeAddress() {

    var address = document.getElementById("address").value;

    geocoder.geocode( { 'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {

        map.setCenter(results[0].geometry.location);

        var marker = new google.maps.Marker({

            map: map, 

            position: results[0].geometry.location

        });

      } else {

        alert("Geocode was not successful for the following reason: " + status);

      }

    });

  }

</script> 

</head> 

<body onload="initialize()"> 

  <div id="map_canvas" height="600" width="600" ></div> 

<input type="text" id="address" x-webkit-speech />

<input type="button" value="Show Location on Map" onclick="codeAddress();" />

</body> 

</html> 

This feature can be integrated with number of websites that have a field for 

address in their form .Google Speech Recognition works particularly well

with recognizing addresses , however when it comes to recognizing names

Google still has a lot to improve . One improvement Google could certainly 

make is embed extra attributes in input tag that will help it narrow down the

search results . For eg in this example it would have been great if it had given

an attrbute like place,email address or phone numbers , which would make 

the speech to text conversion more specific .
Related Articles
Geocode Address For free
Google Latitude Mashup with Google Maps

Read more...

Geocode Address for free

Note : The current page looks has been disoriented due to the
           new design to the blog . We will try to bring this back to
           normal as soon as possible . Sorry!!!

While googling on the web for a geocode address database which I needed for one of my projects and after visitng a number of sites that did give me an geocode address database but at an cost ranging from $30-$200 that I couldn't afford at any cost. So I decided to use Google Maps , Yahoo Maps and Microsoft Bing Maps to create my free geocode address database.So the first thing I had to check out was which of this mapping giants would me give me the most accurate results .So I started by testing out the values returned by each of the maps. For well known places all 3 of them would give me accurate results, but as places became less famous, Microsoft Bing really sucked & was giving me a city level accuracy only!!!!
So Microsoft Bing Maps was ruled out as being suitable for creating an geocode address database . Now the next option was Google Maps & Yahoo Maps and the good news was that both were giving the most accurate & almost the same reuslts all the time .I wonder if this two Mapping Giants use the same common database ??
Is there any difference between Google Maps and Yahoo Maps ??? Each has its own pros & cons and telling which one is better is still a tough job . 1)Google Maps is extensively used in many web applications as comapred to yahoo and graphic wise Google Maps is far more superior than Yahoo Maps . 2)Yahoo Maps takes less time to load than Google Maps . 3)Google Maps allows you to geocode address at 2000 queries per day . 4)Yahoo Maps on the other hand allows you to geocode address at the rate of 50,0000 queries a day i.e almost 25 times more queriies a day . 5)Google Maps Api allows you to use their Directions Api but Yahoo Maps Api doesn't allow you to use their Directions Api expect on the Yahoo Maps homepage .
So lets get started setting up the geocode address database !! Yahoo Maps Geocode Address Database Creation
// Json encode the data function json_code ($json) { $json = substr($json, strpos($json,'{')+1, strlen($json)); $json = substr($json, 0, strrpos($json,'}')); $json=preg_replace('/(^|,)([\\s\\t]*)([^:]*) (([\\s\\t]*)):(([\\s\\t]*))/s', '$1"$3"$4:',trim($json)); return json_decode('{'.$json.'}', true); } // function to get the geocode of the address function geoCodeYp($point) { $yahoo_appid = 'Your yahoo app id'; // Replace your Yahoo AppID here $pointenc = urlencode($point); // URL Formation that will fetch you the results on query $url="http://where.yahooapis.com/geocode? location=".$pointenc."&gflags=R&appid=".$yahoo_appid."&flags=J"; // get the contents of the URL formed $jsondata = file_get_contents($url); $json_data= '{ a: 1, b: 245, c with whitespaces: "test me", d: "function () { echo \"test\" }", e: 5.66 }'; $coord=explode(" ",$point); // this will json encode the data . $convertedtoarray=$this->json_code($jsondata); // line1 of addrress comprising of house,street no etc // line 2 of address comprising of city state country $line1 =$convertedtoarray['ResultSet']['Results']['0']['line1'] ; $line2 =$convertedtoarray['ResultSet']['Results']['0']['line1'] ; $county =$convertedtoarray['ResultSet']['Results']['0']['county'] ; $street =$convertedtoarray['ResultSet']['Results']['0']['street'] ; if(($line1=="")||($line2=="")||($county=="")||($street=="")) { $yahooresults['status']="noresult"; } else { $countrycode=$convertedtoarray['ResultSet']['Results']['0']['countrycode'] ; $statecode =$convertedtoarray['ResultSet']['Results']['0']['statecode'] ; //$county =$convertedtoarray['ResultSet']['Results']['0']['county'] ; $city =$convertedtoarray['ResultSet']['Results']['0']['city'] ; $house =$convertedtoarray['ResultSet']['Results']['0']['house'] ; $latitude =$convertedtoarray['ResultSet']['Results']['0']['latitude'] ; $longitude =$convertedtoarray['ResultSet']['Results']['0']['longitude'] ; $yahooresults = array('countrycode'=>$countrycode,'statecode'=>$statecode, 'county'=>$county,'city'=>$city,'street'=>$street,'house'=>$house, 'latitude'=>$latitude,'longitude'=>$longitude); } return $yahooresults ; }
This are the two functions which you need to create the geocode address  database . So how do I call this geocode function . Include this two functions in a single php file . 1)Suppose you want to get the geocode address of a  place say "Bohemia" . You can simply call the function as  geoCodeYp("Bohemia") . To further store the result in database : $result=geoCodeYp("Bohemia") ; // get each of the values as $latitude=$result['latitude']; $longitude=$result['longitude']; .............remaining variables.................. You can store each of the results in database by retrieving the remaining values . 2) To geocode address of a point(latitude&longitude) //Example $latitude="72.5632" $longitude="19.756"; // You have to include space between the latitude & longitude $point=$latitude." ".$longitude ; //call the geocode function geocode($point);
Time required to setup the geocode address database?? Suppose you have to want to geocode the address of around 5,00,000 address 1 yahoo appid -> 10 days 2 yahoo appid -> 5 days 10 yahoo appid -> 1 day This way you can create your own geocode address database .  "If you liked anything about this post or have any queries free feel to comment . If you are not a developer & want help in setting up the geocode address database you can send me a mail or comment on this post ."
Bookmark or Share this article :

Read more...

Google Latitude Mashup With Google maps

My Second post was on getting the user's location using

google latitude/badge api .This thread is definitely a

continuation of the earlier post , here i will show you how

to display the user location on google maps .

For that we will be using a jquery plugin called JQUERY:GMAP3

Step1

Create a php file that will return the latitude & longitude

Step2 

Make an ajax call to the php file

Step3 

Display the google latitude result on google maps

Step1

######getposition.php #######

<?php

//Replace the YOURUSERID in the url below with your Badge userid . 

$url="http://www.google.com/latitude/apps/badge/api?user=YOURUSERID&type=json" ;

// We get the content

$content = file_get_contents( $url );

print($content); //This will return the data in json format

?>

Step 2 & Step3

For the ajax calls we will be using jquery functionalities directly ,a call

will be made to the php page, which will return me data in json format

which we will parse using jquery parseJSON() function .After this  using

the jquery GMAP3 library(http://plugins.jquery.com/project/gmap3)

we will be displaying the marker on google map .

#### Showmap.html ######

<html>    

  <head> 

    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>        

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

    <script type="text/javascript" src="gmap3.js"></script> 

    <style>

      .gmap3{

        margin: 20px auto;

        border: 1px dashed #C0C0C0;

        width: 500px;

        height: 250px;

      }

      #container{

        overflow: auto;

        text-align:center;

        width: 100px;

        margin: 20 auto;

      }

      .box{

        float: left;

        width: 20px;

        height: 20px;

        margin-left: 20px;

        background-color:#FFF;

        border:1px solid #000;

      }

    </style>

    <script type="text/javascript">   

      $(function(){

// ajax call to the php page   

$.ajax({

type: "POST",

url: "getposition.php",

success: function(msg){

var obj=$.parseJSON(msg);

// Parse data recived .For more details check  //http://api.jquery.com/jQuery.parseJSON/

var latitude=obj.features[0].geometry.coordinates[1];

var longitude=obj.features[0].geometry.coordinates[0];

var coord=new google.maps.LatLng(latitude,longitude); 

$('#test1').gmap3(

{ action: ':addMarker',

latLng: coord,

map:{

center: true,

zoom: 14,

mapTypeId: google.maps.MapTypeId.ROAD

}

}

);

}

});

      });

    </script>  

  </head>

  <body>

    <div id="test1" class="gmap3"></div>

  </body>

</html>

This was just a basic mashup of google latitude & google maps .

If you want to use all the functionalities of google maps you can

refer the site http://night-coder.com/jquery-plugin-gmap3.html

which has clear explanation of using google maps jquery plugin.

If you have still queries about this thread , please do comment .

Thanks !!


Download Code


Related Articles
Geocode Address For free

Google Speech Recognition Mashup with Google Maps

Read more...