javascriptgoogle-translatelanguage-translationgoogle-translation-apigoogle-translator-toolkit

google translate dropdown - set the language option label in that language itself


I have used google translate element with code:

<div id="google_translate_element"></div>
function googleTranslateElementInit() {
    new google.translate.TranslateElement({
        pageLanguage: 'en'
    }, 'google_translate_element');
}
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">

This gives me standard language selector dropdown with english labels.

How can I customize the language label to be in that language itself? The result that I want is:

<select>
<option selected="selected" value="">select</option>
<option value="af">Afrikaans</option>
<option value="sq">shqip</option>
<option dir="ltr" value="ar">العربية</option>
<option value="be">Беларуская</option>
<option value="bg">български</option>
<option value="ca">català</option>
<option value="zh-CN">中文(简体)</option>
<option value="zh-TW">中文(繁體)</option>
<option value="hr">Hrvatska</option>
<option value="cs">česky</option>
<option value="da">Dansk</option>
<option value="nl">Nederlands</option>
<option value="et">Eesti</option>
<option value="tl">Filipino</option>
<option value="fi">suomi</option>
<option value="fr">Français</option>
<option value="gl">Galego</option>
<option value="de">Deutsch</option>
<option value="el">Ελληνικά</option>
<option dir="ltr" value="iw">עברית</option>
<option value="hi">हिन्दी</option>
<option value="hu">magyar</option>
<option value="is">Íslenska</option>
<option value="id">Indonesia</option>
<option value="ga">Gaeilge</option>
<option value="it">Italiano</option>
<option value="ja">日本語</option>
<option value="ko">한국어</option>
....
</select>

UPDATE I though of replacing the innerHTML of the google-generated select

var googleDropdown = $("#google_translate_element .goog-te-combo");
var customDropdown = $("#custom-translate");
googleDropdown.innerHTML = customDropdown.innerHTML;

The custom select:

<select id="custom-translate" style="display:none;">
  <option value="">Select Language</option>
  <option value="af">Afrikaans</option>
  <option value="sq">Albanian</option>
  <option value="am">Amharic</option>
  <option value="ar">Arabic (العربية)</option>
  ...
</select>

This works when I try it on the console when everything is loaded, but when I add this code in file, the problem is googleTranslateElementInit executes in the end.

So how do I make my code execute after the google translate is done?


Solution

  • @margaret thank you for your response.

    But I ended up using a function which sets the labels after the element is loaded. Called that function onclick of the drowdown:

    <div id="google_translate_element" onclick="foo();">
    
    function foo(){
      $("option[value='ar']").text("عربى (Arabic)");
      $("option[value='fr']").text("Français (French)");
     //.... so on
    }