Working with Google’s Language API

Posted on March 7, 2009

Google translate is used by millions of people every day. Combine this with the easy reporting of language errors/mistakes makes it one of the most comprehensive and accurate online translators. Google provides an easy to use API to access their large language database, we’ll be using that today.

It will consist of two textareas, two dropdowns and one button. It will look something like this:

HTML

The HTML code is fairly straight foward. Notice the dropdown menus have values. These are essential as this is the language code, it’s sent to Google.

<body>
<div class="he">
<h2>Translate</h2>
From:
<select id="from">
<option value=sq>Albanian</option><option value=ar>Arabic</option><option value=bg>Bulgarian</option><option value=ca>Catalan</option><option value=zh-CN>Chinese (Simplified)</option><option value=zh-TW>Chinese (Traditional)</option><option value=hr>Croatian</option><option value=cs>Czech</option><option value=da>Danish</option><option value=nl>Dutch</option><option value=en selected>English</option><option value=et>Estonian</option><option value=tl>Filipino</option><option value=fi>Finnish</option><option value=fr>French</option><option value=gl>Galician</option><option value=de>German</option><option value=el>Greek</option><option value=iw>Hebrew</option><option value=hi>Hindi</option><option value=hu>Hungarian</option><option value=id>Indonesian</option><option value=it>Italian</option><option value=ja>Japanese</option><option value=ko>Korean</option><option value=lv>Latvian</option><option value=lt>Lithuanian</option><option value=mt>Maltese</option><option value=no>Norwegian</option><option value=pl>Polish</option><option value=pt>Portuguese</option><option value=ro>Romanian</option><option value=ru>Russian</option><option value=sr>Serbian</option><option value=sk>Slovak</option><option value=sl>Slovenian</option><option value=es>Spanish</option><option value=sv>Swedish</option><option value=th>Thai</option><option value=tr>Turkish</option><option value=uk>Ukrainian</option><option value=vi>Vietnamese</option>
</select>

To:
<select id="to">
<option value=sq>Albanian</option><option value=ar>Arabic</option><option value=bg>Bulgarian</option><option value=ca>Catalan</option><option value=zh-CN>Chinese (Simplified)</option><option value=zh-TW>Chinese (Traditional)</option><option value=hr>Croatian</option><option value=cs>Czech</option><option value=da>Danish</option><option value=nl>Dutch</option><option value=en selected>English</option><option value=et>Estonian</option><option value=tl>Filipino</option><option value=fi>Finnish</option><option value=fr>French</option><option value=gl>Galician</option><option value=de>German</option><option value=el>Greek</option><option value=iw>Hebrew</option><option value=hi>Hindi</option><option value=hu>Hungarian</option><option value=id>Indonesian</option><option value=it>Italian</option><option value=ja>Japanese</option><option value=ko>Korean</option><option value=lv>Latvian</option><option value=lt>Lithuanian</option><option value=mt>Maltese</option><option value=no>Norwegian</option><option value=pl>Polish</option><option value=pt>Portuguese</option><option value=ro>Romanian</option><option value=ru>Russian</option><option value=sr>Serbian</option><option value=sk>Slovak</option><option value=sl>Slovenian</option><option value=es>Spanish</option><option value=sv>Swedish</option><option value=th>Thai</option><option value=tr>Turkish</option><option value=uk>Ukrainian</option><option value=vi>Vietnamese</option>

</select>
</div>

<div class="tebg">
<table>
<tr><td><textarea rows="10" cols="60" id="or" class="te"></textarea></td></tr>
<tr><td><textarea rows="10" cols="60" id="tr" class="te"></textarea></td></tr>
</table>
</div>

<input type="submit" id="translate" value="Translate" />
<div id="translation"></div>
</body>

We’ll start by including Google’s Language API and jQuery. We can’t link directly to a language.js file, instead we need to use Google’s own load function. jQuery will also be included this way.


google.load("language", "1");
google.load("jquery", "1.3.2");

We need to use jQuery to get 3 values. The textarea containing the words they want translated, the language it is currently in and the language they want it translated into. We only want to capture these when the user clicks the translate button so we wrap it in the click event.

    $(document).ready(function(){

		    $("#translate").click(function(){

		        var from = $("#from").val();
			var to = $("#to").val();

			var orig = $("#or").val();

			    });

	});

Now we need to use Google’s translate function. It takes several parameters – the text we want translated (orig), the language the text was in (from) and the language we want it translated to (to). We capture the information google sends back to is in result. If there are no errors then we set the textarea to the translated text.

google.language.translate(orig, from, to, function(result) {

	if(!result.error)
	{

		$("#tr").val(result.translation);

	}

	});

If you have any questions or comments feel free to post them below.

2 Responses

  1. supriyaam
    March 24, 2009

    code is working proper for all languages but what abt Marathi Language.
    i want marathi lan add to option list.

    pls help…
    waiting your reply


  2. sourcebits staff
    March 24, 2009

    Remember we are using Google’s Language APIs, not our own language system. We can only use what they provide.

    Sorry.


Leave a Reply

You must be logged in to post a comment.


Loading ...