Google API Showcase: The Live Translator

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





Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 5

Comments are closed.
  1. 3

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

  2. 4

    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!

  3. 5

    With the exception of the Translate v2 API, which is now available as a paid service, the APIs included in this family have all been deprecated. See the documentation for each API for details.

Comments are closed.