Thursday, May 5, 2011

Google Chrome Speech Recognition mashup with Google Maps

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

The complete working code is as follows .
<title>Google Speech Recognition Mashup Google Maps</title> 

<script type="text/javascript" src=""></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) {
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
      } else {
        alert("Geocode was not successful for the following reason: " + status);
<body onload="initialize()"> 
<input type="text" id="address" x-webkit-speech /> <input type="button" value="Show Location on Map" onclick="codeAddress();" /> </body> </html>

See the Live Demo

  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 .


I love the look of your website. I recently built mine and I was looking for some ideas for my site and you gave me a few.