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.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("language", "1");
google.load("jquery", "1.3.2");
</script>

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);

	}

	});

Demo: http://query7.com/demos/google-translate/

Download: http://query7.com/wp-content/uploads/google-translate.zip

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

3 Responses

muse69
September 1, 2010

hi…this is what I was looking for..but I don’t know how to use the last three steps..

do I need to create a new “javascript” file or should I just write all these codes into the HTML file?

i really need a help please.. I don’t know write the javascript very well.Do i need to link it to the html too?

Regards
Marcel
logan
September 3, 2010

Hi Marcel

I recommend you learn the absolute basics of HTML and Javascript. Both Tizag.com and w3schools.com have good introductory tutorials. Likewise there are many books aimed at beginners in web development (check your local library).

All of the HTML and javascript should be in one file.

Regards
Logan
muse69
September 9, 2010

Hi Logan,

Thank you very much. That helped me a lot.
Awesome!!! I appreciate your help.
Cheers
Marcel