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 […]

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!

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 5

Comments are closed.
  1. 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. 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. 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.