Google API Showcase: The Live Translator

Development September 30, 2009 by Mary Lou 4 Comments

The API of Google has a lot of useful usage examples. This showcase demonstrates how we can use the Google AJAX Language API to build a live translator that allows us to translate text from one language into the other – and that almost on the fly.

Check out the demo here: DEMO

Here is the jQuery part:

(function($) {
  $.fn.translate = function(options) {
		 var opts = $.extend({}, $.fn.translate.defaults, options);
		 return this.each(function() {
			$this = $(this);
			$("select#_from option[selected]").removeAttr("selected");
			$("select#_from option[value='en']").attr("selected", "selected");
			$("select#_to option[selected]").removeAttr("selected");
			$("select#_to option[value='es']").attr("selected", "selected");
			$('#content',$this).val("");

			$(document).keypress(function(e){
				if(e.which == 13){
					$.fn.translate.initialize();
					$("#content").val("");
				}
			});
			$('#_from',$this).change(function(e){
				$.fn.translate.defaults._from_lang = $(this).val();
			});
			$('#_to',$this).change(function(e){
				$.fn.translate.defaults._to_lang = $(this).val();
			});
		 });
  };
  $.fn.translate.initialize = function() {
	  var content = $('#content');
	  var text = $("#content").val();
	  google.language.translate(text, $.fn.translate.defaults._from_lang, $.fn.translate.defaults._to_lang, function(result) {
	    var translated = $("#translation");
		var translated_original = $("#translation_original");
	    if (result.translation) {
	      (translated.html() != "")?translated.append("
"+result.translation):translated.append(result.translation);
		  (translated_original.html() != "")?translated_original.append("
"+text):translated_original.append(text);
	    }
		else{
		  (translated.html() != "")?translated.append("
"+text):translated.append(text);
		  (translated_original.html() != "")?translated_original.append("
"+text):translated_original.append(text);
		}
	  });
  }
  $.fn.translate.defaults = {
    _from_lang	: 'en',
    _to_lang	: 'es'
  };
})(jQuery);

Note, that this is just a demo. Not all the languages that are supported by the Google AJAX Language API are included here.

Enjoy!

Tagged with: , , , ,

You might also like

Discussion4 Join the discussion

  • Polprav
    October 16th, 2009 at 17:53

    Hello from Russia!
    Can I quote a post in your blog with the link to you?

  • Mary Lou
    October 16th, 2009 at 17:59

    Privjet!
    Of course you can do that!
    Greetings

  • Benjamin Mayo
    January 8th, 2010 at 17:22

    When using the Google API’s, you have to make sure you show Google branding, otherwise you are breaching the TOS of using the API’s.

    To do so, add google.language.getBranding(‘branding’); inside the $().ready();

  • Andrew
    July 5th, 2010 at 05:49

    Hi. Thanks very much for putting this together! I am currently helping my 9 year old son to build his first website. He would love to include your live translator but would like to be able to use all the languages the google api allows rather than the shorter selection you have used here. Unfortunately however although I have read through the api several times I cannot work out how to ammend your jquery to include all the languages (sorry, I am very new to javascript). So we would be very greatful for any help. Many thanks!

Follow this discussion

Join the discussion