I got an email this morning from CodeProject with a link to the Google api for language translation. I taught it was interesting so i decided to start exploring it and created 3 demos/examples here:

1. Translate language on page load
2. Translate language as you type
3. Translate to a specific language
   

What i plan to do when i get some free time is to enable users to translate this site into their own language by clicking on their country flag.  

Note: You can download the source code at the end.

Demo 1 

Code: 

JavaScript

// This changes the text on the page load

google.load("language", "1");

function initialize()

{

    google.language.translate(document.getElementById("text1").innerHTML , "en", "es", function(result) {

    if (!result.error)

        {

            var container = document.getElementById("translation1");

            container.innerHTML = result.translation;

        }

    });

}

google.setOnLoadCallback(initialize);

HTML 

<script src="http://www.google.com/jsapi" type="text/javascript"> </script>

<div id="text1">

This text will be translated on the page load to Spanish.

</div>

<br /><b>Translation:</b><br />

<div id= "translation1"> </div>

Demo 2 

Code:

JavaScript

//This will translate the textarea as you type

function TranslateAsYouType()

{

    google.language.translate(document.getElementById("txtBox1").value, "en", "es", function(result) {

        if (!result.error)

        {

            var container = document.getElementById("translation2");

            container.innerHTML = result.translation;

        }

    });

}

HTML

<script src="http://www.google.com/jsapi" type="text/javascript"> </script>

<b>Type english Text:</b><br />

<textarea cols='40' rows='3' id='txtBox1' onkeypress='TranslateAsYouType()'></textarea>

<br />

<b>Translation:</b>

<div id="translation2">

</div>

Demo 3 

Code:

JavaScript

//This function will translate to the selected language that is passed

function TranslateTo(lang)

    {

    google.language.translate(document.getElementById("text3").innerHTML, "en", lang, function(result) {

        if (!result.error)

        {

            var container = document.getElementById("translation3");

            container.innerHTML = result.translation;

        }

    });

}

HTML 

<script src="http://www.google.com/jsapi" type="text/javascript"> </script>

The following text will get translated to the language of your choice<br />

<a href="javascript:TranslateTo('fr')">French</a> |

<a href="javascript:TranslateTo('de')">German</a> |

<a href="javascript:TranslateTo('it')">Italian</a> |

<a href="javascript:TranslateTo('pt-PT')">Portuguese</a> |

<a href="javascript:TranslateTo('ru')">Russian</a> |

<a href="javascript:TranslateTo('es')">Spanish</a> |

<a href="javascript:TranslateTo('nl')">Dutch</a> |

<a href="javascript:TranslateTo('ar')">Arabic</a> |

<a href="javascript:TranslateTo('zh')">Chinese</a> |

<a href="javascript:TranslateTo('zh-CN')">Chinese Simplified</a> |

<a href="javascript:TranslateTo('zh-TW')">Chinese Traditional</a> |

<a href="javascript:TranslateTo('ko')">Korean</a>

<br /> NOTE:Some will only work if the language pack is installed on the users browser

<br /><br />

<b>English Text:</b><br />

<div id="text3">

This text will be translated to the language of your choice.

</div>

<br /><b>Translation:</b><br />

<div id= "translation3"> </div

Download: Translation.zip (2KB)

Links:

• Google class reference
• CodeProject