Google Chrome Speech Recognition mashup with Google Maps ~ GOOGLE CODE , TIPS TRICKS and Hacks

Vaishakh Thayyil

feature , Google Maps , Speech Recognition

Thursday, May 5, 2011

1 Comment

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

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

The complete working code is as follows .

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


<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()"> 
  

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

Google Chrome Speech Recognition mashup with Google Maps

1 comments :

Category