HTML Google translate - for China and the rest of the world

Question

i'm using the below code for Google translate and its working great. The problem is that those people in China cant access the google translation drop down because google.translate.com is blocked. However google.translate.cn is not blocked. I've tried simply using google.translate.cn in the script section however then the language dropdown is all in chinese...

How can i direct users who select Chinese in the language option to use google.translate.cn and the rest of the world to use google.translate.com?

I guess i need to use a custom dropdown and not the default google one? Anyone have code on how to do this? thanks in advance

<Style>
.goog-te-banner-frame.skiptranslate {
    display: none !important;
    } 
body {
    top: 0px !important;
font-family: "Segoe UI", "Segoe UI", Segoe, Tahoma, Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: 400 ;
    }
 </Style>
<div id="google_translate_element">


<script>
   function googleTranslateElementInit() {
                new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,ko,ja,id,ms,th,vi,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');

                 /*
            To remove the "powered by google",
            uncomment one of the following code blocks.
            NB: This breaks Google's Attribution Requirements:
            https://developers.google.com/translate/v2/attribution#attribution-and-logos
        */

        // Native (but only works in browsers that support query selector)
        if(typeof(document.querySelector) == 'function') {
           document.querySelector('.goog-logo-link').setAttribute('style', 'display: none');
            document.querySelector('.goog-te-gadget').setAttribute('style', 'font-size: 0');
        }

        // If you have jQuery - works cross-browser - uncomment this
        jQuery('.goog-logo-link').css('display', 'none');
        jQuery('.goog-te-gadget').css('font-size', '0');



  }




        </script>

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

Answer 1

Blunt method of handling this would be loading translate script from both google.com and google.cn. In this case, if it fails to load from google.com, the one from google.cn should load.

The only thing that is needed is to make sure Google Translate Element is only created once.

<script>
var googleTranslateElement; //global var for Google Translate Element

function googleTranslateElementInit() {

    if (googleTranslateElement) return; //var being non-empty means element already created

    //store Google Translate Element in our var
    googleTranslateElement = new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,ko,ja,id,ms,th,vi,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL},'google_translate_element'); 

//----- cut -----

}
</script>

... and don't forget to load translate script from translate.google.cn as well:

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

<!-- Load translate script from translate.google.cn -->

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