Click here to Skip to main content
15,860,972 members
Articles / Web Development / HTML

Google Translator API v2 Implementation

Rate me:
Please Sign up or sign in to vote.
4.78/5 (7 votes)
25 Dec 2011CPOL3 min read 72.9K   4.8K   30   9
This is a very simple implementation of Google Translator API v2 implementation. It is a simple HTML file and makes use of jQuery for client side operations.

Introduction

These days, Google is busy in shutting down their free goodies/services that were available. Language Translation service is one among them which was shut down completely from Dec 01, 2011. Now Google has come up with Translation API V2 which is a paid version of Translation Service. Many apps which were dependent on the free version of service have been affected and some have opted for the paid version as some are in the process of shifting the providers. There’s one freebie from Microsoft too Bing Translation APIs. Anyways, I won’t be getting into Bing here but rather concentrate on the Google Language Translator API v2.

Background

This is a very simple and easy to understand implementation of API which is built on simple HTML page and makes use of jQuery to get much of the client side related activities done.

Note: Before I continue, I would like to stress that this article makes an assumption that you have a valid Google API v2. This video provides all the guidance required to get a Google API key.

Using the Code

To make it simple, I have segmented the article content into 3 portions:

Image 1

Supported Languages – This portion would concentrate on listing the languages which are supported by Google Translator.

The API provides the list of codes for the supported languages but by default doesn’t provide the name of the languages. In case of requirement of the language name, we can pass in additional parameter Target and specify the language code in which we want the language name to be provided in. For e.g., if we specify the code as ‘zh-CN’ it would provide the language names in ‘Chinese Simplified’ and if it's ‘en’ it would list out the names in ‘English’.

JavaScript
Code functionality for loading all the supported Languages by Google API 
function loadLanguages() {
   var apiurl = "https://www.googleapis.com/language/translate/v2/languages?key=" + 
    apiKey<span class="Apple-tab-span" style="white-space: pre; ">        
    </span> + "&target=en";

            $.ajax({
                url: apiurl,
                dataType: 'jsonp',
                success: function (data) {
                    var languages = data.data.languages;
                    $.each(languages, function (index, language) {
                        $('#selSourceLanguage').append('<option value="' + 
            language.language + '">' + language.name + '</option>');
                        $('#selTargetLanguage').append('<option value="' + 
            language.language + '">' + language.name + '</option>');
                    });
                    $("select#selSourceLanguage").val('en');
                    $("select#selTargetLanguage").val('en');
                },
                error: function (x, e) {
                    alert('Error occurred while loading the Google Supported Languages');
                }
            });
 }

Detect Language – This portion would be concentrating on detecting the language of the text that’s been provided by the end user for translation. API would make use of its internal AI to identify the language and notify it to the end user. In case it's not possible, it would notify as Unknown.

JavaScript
Code functionality for auto detecting the language of the text to be translated 
function detectLanguage() {
   var text = $.trim($('#txtOrgText').val());
   if (text.length > 0) {
     var apiurl = "https://www.googleapis.com/language/translate/v2/detect?key=" + 
    apiKey <span class="Apple-tab-span" style="white-space: pre; ">    
    </span>+ "&q=";

       $.ajax({
          url: apiurl + encodeURIComponent(text),
          dataType: 'jsonp',
          async: false,
          success: function (data) {
                 var obj = data.data.detections[0];
                 $('#selSourceLanguage').val(obj[0].language);
                 langSource = obj[0].language;
                 $('#divDetectedLanguage').html("The automatically detected language is: 
        " <span class="Apple-tab-span" style="white-space: pre; ">            
        </span>+ $('#selSourceLanguage option:selected').text());
                 $.unblockUI();
          <span class="Apple-tab-span" style="white-space: pre; ">    </span>},
          error: function (x, e) {
                 $('#divDetectedLanguage').html
        ("Error occurred while detecting the current 
        <span class="Apple-tab-span" style="white-space: pre; ">            
        </span>text language");
                 $.unblockUI();
                }
              });
      }
      else {
         $('#divDetectedLanguage').html("No Text for Translation was provided");
         $.unblockUI();
      }
 }

Translation – This would be our ultimatum. Get the text translated into language (supported by Google API) as required.

JavaScript
Code functionality to translate the text 
 $('#btnTranslate').click(function (e) {
     e.preventDefault();

     var text = $.trim($('#txtOrgText').val());
     $('#divTranslated').html("");
     if (text.length > 0) {
         var langSource = $('#selSourceLanguage').val();
         var langTarget = $('#selTargetLanguage').val();

         if (langSource === "" || langTarget === "") {
             alert("Select Source Language and Target Language");
         }
         else if (langSource === langTarget) {
             alert("Source Language and Target Language cannot be same");
         }
         else {
              $.blockUI({ css: {
              border: 'none',
              padding: '15px',
              backgroundColor: '#000',
              '-webkit-border-radius': '10px',
              '-moz-border-radius': '10px',
              opacity: .5,
              color: '#fff'
             }
         });
     var apiurl = "https://www.googleapis.com/language/translate/v2?key=" + apiKey + 
    "                       &source=" + langSource + "&target=" + langTarget + "&q=";

     $.ajax({
        url: apiurl + encodeURIComponent(text),
        dataType: 'jsonp',
        async: false,
        success: function (data) {
        <span class="Apple-tab-span" style="white-space: pre; ">    
        </span> if (langSource === langTarget) {
                     $('#divTranslated').html(text);
                 }
                 else if (langSource != "") {
                  try {
                       $('#divTranslated').html(data.data.translations[0].translatedText);
                  }
                  catch (e) {
                       $('#divTranslated').html(text);
                  }
             }
             $('#divTranslated').css({ "border": "1px solid #7F9DB9" });
             $('#divTranslated').css({ "padding": "4 4 4 4" });

             $('#lblTranslation').css({ "color": "black" });
             $.unblockUI();
            },
           error: function (x, e) {
              alert('Error occurred while translating the text');
              $.unblockUI();
           }
         });
        }
      }
      else {
          alert("Nothing was entered to translate");
          $.unblockUI();
        }
     });
    $.unblockUI();
});

The process followed in this article implementation is very simple. UI for the implementation is self-explanatory. We have a text box where the end user can key in the text which he/she wishes to be translated. There are 2 drop downs which are pre-loaded with the list of languages supported for translation by Google API and 2 buttons which perform the action as indicated ‘Detect’ and ‘Translate’.

Once text is provided, the user can make use of the ‘Detect’ button and use the Google API service which tries to detect the language of the language and set the Detected Language as the Source Language. If in case Google Service is unable to detect the language, it would set the source language as Unknown. And at any point of time, the user can manually select the source language and the target language and use the ‘Translate’ option to get the translation done.

Points of Interest

This is a very basic implementation and can be improved upon.

History

You can find the implementation of Google Translator which used the earlier version of Google API here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer India
India India
This is Govardhana Reddy, i am here to explore this world of INTERNET. I feel this is one way through which i can explore this world of INTERNET.

I want to be one among the best in this profession (a Software Developer, not a Software Engineer its a bit Controversial.) if not the "BEST"

My definition of a Software Engineer : "A person who knows what to cut/copy and where to paste".

Apart from my technical stuff I love Long Drives, Computer Gaming, Sports, Bikes and much more to say.

Anyways long road ahead keep me accompanied...

Comments and Discussions

 
QuestionIdea about implementation of translator?? Pin
sakithya5-Feb-15 23:14
sakithya5-Feb-15 23:14 
AnswerRe: Idea about implementation of translator?? Pin
Govardhana Reddy6-Feb-15 0:01
professionalGovardhana Reddy6-Feb-15 0:01 
QuestionIt's working fine for me - Thank you for your help Pin
Member 1060351125-Feb-14 2:18
Member 1060351125-Feb-14 2:18 
Questioncode is not running well Pin
aakashgupta77717-Feb-14 22:28
aakashgupta77717-Feb-14 22:28 
AnswerRe: code is not running well Pin
Govardhana Reddy24-Feb-14 7:09
professionalGovardhana Reddy24-Feb-14 7:09 
GeneralMy vote of 5 Pin
Rajatchugh1825-Oct-12 1:52
Rajatchugh1825-Oct-12 1:52 
SuggestionNothing is free from google... Pin
ii_noname_ii28-Dec-11 0:23
ii_noname_ii28-Dec-11 0:23 
Questionvb.net Pin
Member 822979027-Dec-11 7:36
Member 822979027-Dec-11 7:36 
AnswerRe: vb.net Pin
Govardhana Reddy28-Dec-11 6:53
professionalGovardhana Reddy28-Dec-11 6:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.