September 8, 2022

Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown list containing all supported languages.

Create a custom flag country list and call Google translator code using custom javascript code. The benefit of this custom menu is that we can hide Google Translate and use all languages to translate the webpage.

how to style google translate dropdown, google translate api, language translator javascript code for website, google translate set default language javascript

How to make use of it:

1. Create a country checklist containing languages from which you’ll select to translate your webpage.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>

<!-- Bootstrap Select -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap-select.min.css" />
<script src="/path/to/cdn/bootstrap-select.min.js"></script>

<!-- Flag Icon -->
<link rel="stylesheet" href="/path/to/cdn/flag-icon.min.css" />
<select class="selectpicker" data-width="fit" onchange="translateLanguage(this.value);">
  <option data-content='<span class="flag-icon flag-icon-af"></span> Afrikaans' value="Afrikaans">Afrikaans</option>
  <option  data-content='<span class="flag-icon flag-icon-al"></span> Albanian' value="Albanian">Albanian</option>
  <option  data-content='<span class="flag-icon flag-icon-ar"></span> Arabic' value="Arabic">Arabic</option>
  <option  data-content='<span class="flag-icon flag-icon-am"></span> Armenian' value="Armenian">Armenian</option>
  <option  data-content='<span class="flag-icon flag-icon-az"></span> Azerbaijani' value="Azerbaijani">Azerbaijani</option>
  ...
</select>

2. Load the needed Google Translate API.

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

3. Add the Google Translator Widget to the web page.

<div id="google_translate_element"></div>

4. The important script to allow the Google Translator on your webpage.

function googleTranslateElementInit() {
  new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element');
}

function translateLanguage(lang) {
  googleTranslateElementInit();
  var $frame = $('.goog-te-menu-frame:first');
  if (!$frame.size()) {
    alert("Error: Could not find Google translate frame.");
    return false;
  }
  $frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
  return false;
}

$(function(){
  $('.selectpicker').selectpicker();
});

Translate Web Content Using Google Translate API, Google Translate Flag Dropdown plugin/Github, html translation tool


See Demo And Download

Official Website(devdreamsolution): Click Here

This superior jQuery/javascript plugin is developed by devdreamsolution. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.