In this article I will explain with an example, how to use the Google Translation (Translate) API in JavaScript and jQuery.
Google Translation (Translate) API can be accessed using HTTP GET method and it returns the translated content in JSON format.
 
 
Google Translation API
You will need to register and generate and get Google API key and also enable the Google Translation (Translate) API in the Google Console.
For more details refer here.
Note: In order to use the Google Translation API, you will need to enable Billing for your API and select the Trial pack.
 
 
Using Google Translation (Translate) API in JavaScript and jQuery
The following HTML Markup consists of two HTML DropDownLists populated with ISO codes of languages, a Button and two HTML TextArea elements.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                Source Language
            </td>
            <td>
                <select id="ddlSource">
                    <option value="ZH">Chinese (Mandarin)</option>
                    <option value="CS">Czech</option>
                    <option value="DA">Danish</option>
                    <option value="NL">Dutch</option>
                    <option value="EN" selected = "selected">English</option>
                    <option value="ET">Estonian</option>
                    <option value="FR">French</option>
                    <option value="KA">Georgian</option>
                    <option value="DE">German</option>
                    <option value="HI">Hindi</option>
                    <option value="HU">Hungarian</option>
                    <option value="LA">Latin</option>
                    <option value="LV">Latvian</option>
                    <option value="LT">Lithuanian</option>
                    <option value="SR">Serbian</option>
                    <option value="CY">Welsh</option>
                    <option value="XH">Xhosa</option>
                </select>
            </td>
            <td>
            </td>
            <td>
                Target Language
            </td>
            <td>
                <select id="ddlTarget">
                    <option value="ZH">Chinese (Mandarin)</option>
                    <option value="CS">Czech</option>
                    <option value="DA">Danish</option>
                    <option value="NL">Dutch</option>
                    <option value="EN">English</option>
                    <option value="ET">Estonian</option>
                    <option value="FR" selected = "selected">French</option>
                    <option value="KA">Georgian</option>
                    <option value="DE">German</option>
                    <option value="HI">Hindi</option>
                    <option value="HU">Hungarian</option>
                    <option value="LA">Latin</option>
                    <option value="LV">Latvian</option>
                    <option value="LT">Lithuanian</option>
                    <option value="SR">Serbian</option>
                    <option value="CY">Welsh</option>
                    <option value="XH">Xhosa</option>
                </select>
            </td>
            <td>
                <input type="button" id="btnTranslate" value="Translate" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <textarea id="txtSource" rows="10" cols="30"></textarea>
            </td>
            <td>
            </td>
            <td colspan="2">
                <textarea id="txtTarget" rows="10" cols="30"></textarea>
            </td>
            <td>
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnTranslate").click(function () {
            var url = "https://translation.googleapis.com/language/translate/v2?key=API_Key";
            url += "&source=" + $("#ddlSource").val();
            url += "&target=" + $("#ddlTarget").val();
            url += "&q=" + escape($("#txtSource").val());
            $.get(url, function (data, status) {
                $("#txtTarget").val(data.data.translations[0].translatedText);
            });
        });
    </script>
  
</body>
</html>
 
 
Explanation:
When the Translate button is clicked, first the values of the following parameters to be passed to the Google Translation (Translate) API are fetched.
source – Language ISO code value fetched from the Source DropDownList element.
target – Language ISO code value fetched from the Target DropDownList element.
q – The value of the text to be translated fetched from the Source TextArea element.
Then a GET HTTP call is made to the Google Translation (Translate) API and the result is fetched in a JSON object which contains the translated text.
Finally the translated text is assigned to the Source TextArea element.
 
 
Screenshot
Using Google Translation (Translate) API in JavaScript and jQuery
 
 
Downloads
Download Code