Post
Ask Question

Implementing Google Translator In A Webpage

Given below is a simple HTML page, which has scripts for Google Translator-
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  6.     <title>Google Translator - Basic Translation</title>  
  7.     <style>  
  8.         body {  
  9.             top: 0 !important;  
  10.         }  
  11.           
  12.         .goog-te-banner-frame {  
  13.             display: none;  
  14.         }  
  15.     </style>  
  16. </head>  
  17.   
  18. <body>  
  19.     <div id="google_translate_element">  
  20.     </div>  
  21.     <script type="text/javascript">  
  22.         function googleTranslateElementInit() {  
  23.             new google.translate.TranslateElement({  
  24.                 pageLanguage: 'en',  
  25.                 layout: google.translate.TranslateElement.InlineLayout.SIMPLE  
  26.             }, 'google_translate_element');  
  27.         }  
  28.     </script>  
  29.     <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>  
  30.     <br />  
  31.     <div>  
  32.         Hi, Good morning! This is a simple text for testing the Google's translator.  
  33.     </div>  
  34. </body>  
  35.   
  36. </html>  
While running page, shown above, in the Browser, Google automatically creates a dropdown structure at the top of the page, inside div provided by us with ID "google_translate_element".


We can reposition this div to our desired position, using css.

The default language was set as English. While clicking the dropdown, we will get a list of languages, available for the translation.

 
Clicking on any of the language will make a complete Webpage translated to that particular language. Here, the Webpage is translated to Spanish.


For more details of implementing a translator in your Website, please visit this link. Hope, this will be helpful for someone out there.