Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » ASP.NET » Samples » Downloads
 
Add your own
alternative version

Google Translator API v2 Implementation

, 25 Dec 2011 CPOL
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.
Google_API_v2_Translator_Implementation.zip
Google_API_v2_Translator_Implementation
CSS
Images
footer.jpg
Scripts
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Govadhana Reddy - Google API V2</title>
    <meta name="description" content="Google Tanslator API V2" />
    <meta name="keywords" content="Google, Language Translator, API V2, Govardhana Reddy, apondu, HTML, CSS, JavaScript" />
    <meta name="author" content="Govardhana Reddy" />
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>
    <script language="javascript" type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
    <script language="javascript" type="text/javascript" src="Scripts/jquery.blockUI.js"></script>
    <link media="screen" type="text/css" rel="stylesheet" href="CSS/StyleSheet.css"/>
    <script language="javascript" type="text/javascript">

        google.load("language", "1");
        var apiKey = "";

        $(document).ready(function () {
            if ($('#selSourceLanguage option').size() == 0) {
                loadLanguages();
                if ($("#divBranding").innerHTML == "") {
                    google.language.getBranding('divBranding');
                }
            }

            $('#btnDetect').click(function (e) {
                e.preventDefault();
                $.blockUI({ css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .5,
                    color: '#fff'
                }
                });
                detectLanguage();
                $.unblockUI();
            });

            $('#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) {
                                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 occured while translating the text');
                                $.unblockUI();
                            }
                        });
                    }
                }
                else {
                    alert("Nothing was entered to translate");
                    $.unblockUI();
                }
            });
            $.unblockUI();
        });

        function loadLanguages() {
            var apiurl = "https://www.googleapis.com/language/translate/v2/languages?key=" + apiKey + "&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 occured while loading the Google Supported Languages');
                }
            });
        }

        function detectLanguage() {
            var text = $.trim($('#txtOrgText').val());
            if (text.length > 0) {
                var apiurl = "https://www.googleapis.com/language/translate/v2/detect?key=" + apiKey + "&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: " + $('#selSourceLanguage option:selected').text());
                        $.unblockUI();
                    },
                    error: function (x, e) {
                        $('#divDetectedLanguage').html("Error occured while detecting the current text language");
                        $.unblockUI();
                    }
                });
            }
            else {
                $('#divDetectedLanguage').html("No Text for Translation was provided");
                $.unblockUI();
            }
        }
    </script>
</head>
<body>
    <div style="width: 800px; margin-left: auto; margin-right: auto;">
        <div class="container">
            <div class="header">
                <h1 class="headertitle">
                    <span id="lblPodcastHeader">Google Translator API v2 Implementation</span>
                </h1>
            </div>
            <div class="main">
                <table style="width: 720px; padding-top: 20px;" align="center">
                    <tr>
                        <td colspan="3" align="left" style="font-size:12px; color: Red;">
                            *Note : A Valid Google API Key is required
                        </td>
                        <td>
                            <div id="divBranding">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="filler">
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                            Origional Text :
                        </td>
                        <td class="style2" colspan="3">
                            <textarea id="txtOrgText" style="width: 398px; height: 60px; font-family: Calibri, verdana, arial, sans-serif;
                                font-size: 12px;" name="txtOrgText" rows="8" cols="200"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="filler">
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                        </td>
                        <td colspan="3">
                            <div id="divDetectedLanguage" style="font-size: 8pt; color: blue;">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="filler">
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                            Source Language :
                        </td>
                        <td class="style4">
                            <select id="selSourceLanguage" name="selSourceLanguage" >
                            </select>
                        </td>
                        <td class="style3">
                            Target Language :
                        </td>
                        <td>
                            <select id="selTargetLanguage" name="selTargetLanguage" >
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="filler">
                        </td>
                    </tr>
                    <tr>
                        <td class="style1">
                        </td>
                        <td align="center" class="style4">
                            <input id="btnDetect" type="button" value="Detect" name="btnDetect" style="width: 70px;" />
                        </td>
                        <td align="center">
                            <input id="btnTranslate" type="button" value="Translate" name="btnTranslate" style="width: 94px;" />
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="filler">
                        </td>
                    </tr>
                    <tr>
                        <td id="lblTranslation" style="color: white; padding-top: 4px;" valign="top" class="style1">
                            Translated Text:&nbsp;
                        </td>
                        <td colspan="3">
                            <div id="div1" style="font-size: 10pt">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="filler">
                        </td>
                    </tr>
                    <tr>
                        <td class="style1" colspan="4">
                            <div id="divTranslated" style="font-size: 10pt">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="filler">
                        </td>
                    </tr>
                </table>
                <h3 class="topseparator">
                    Feedback & Comments</h3>
            </div>
            <div class="footer">
                <table>
                    <tr>
                        <td>
                            <img alt="" src="Images/footer.jpg" />
                        </td>
                        <td colspan="3">
                            <div style="font-size: 23px">
                                Govardhana Reddy</div>
                            <br />
                            <a href="mailto:apondu@gmail.com?Subject=Google Translator API V2">apondu@gmail.com</a>
                            <br />
                            <a href="mailto:apondu@neversaydie.co.in?Subject=Google Translator API V2">apondu@neversaydie.co.in</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

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

Share

About the Author

Govardhana Reddy
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...
Follow on   Twitter

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150331.1 | Last Updated 25 Dec 2011
Article Copyright 2011 by Govardhana Reddy
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid