Multiple Instances of Google Translate

Question

I\'m trying to get multiple instances of Google Translation Drop Down to show up, but it seems it will only pick one to show up.

Full Page Code

Answer 1

I attempted may of these options, but ultimately needed to completely .detach() the element in order for the second to work.

In this case it was for a responsive website where the translate needed to work in two different menus:

<div  id="m_google_translate_element"></div>

<div class="rightHeader" id="mobileHeader">
    <div class="translate" id="g_translater">
        <div id="google_translate_element"></div>
        <script type="text/javascript">
            var m = false;
            function googleTranslateElementInit() {
                new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_RIGHT, gaTrack: true, gaId: 'UA-XXXXXX-1'}, 'google_translate_element');

                setTimeout(function(){
                    if (jQuery( window ).width() < 768){
                        m = true;
                        jQuery('#g_translater').detach().appendTo('#m_google_translate_element');                            
                    }
                }, 3000);
            }
            jQuery( window ).resize(function() {
                if (jQuery( window ).width() < 768 && m == false){
                    m = true;
                    jQuery('#g_translater').detach().appendTo('#m_google_translate_element');                            
                } else if (jQuery( window ).width() >= 768 && m == true){
                    m = false;
                    jQuery('#g_translater').detach().prependTo('#mobileHeader');                            
                }
            });
        </script>
        <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    </div>
</div>

Answer 2

Since the average user will either have a desktop sized window at page load, or a mobile sized window. I solved this by using 2 if statements at page load which check the width where it transitions between themes. 1 in one area and 1 in another. Duplicating all the elements in each area. Like this

<div id="google_translate_elementOne"></div>

<script type="text/javascript">
    function googleTranslateElementInitOne() {
        new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_elementOne');
    };
</script>

<script>
    if ($(window).width() >= 630) {
        document.write("<script type=\"text/javascript\" src=\"//translate.google.com/translate_a/element.js?cb=googleTranslateElementInitOne\"><\/script>");
    }
</script>

And

<div id="google_translate_elementTWO"></div>

<script type="text/javascript">
function googleTranslateElementInitTWO() {
    new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_elementTWO');
}
</script>

<script>
if ($(window).width() < 630) {
        document.write("<script type=\"text/javascript\" src=\"//translate.google.com/translate_a/element.js?cb=googleTranslateElementInitTWO\"><\/script>");
    }
</script>

Answer 3

function googleTranslateElementInit() {

//  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,zh-CN,nl,fr,ru,ja,es,ko,pt', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');

if ($(window).width() < 760) {
   new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,zh-CN,nl,fr,ru,ja,es,ko,pt', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element2');

}
else{
    new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,zh-CN,nl,fr,ru,ja,es,ko,pt', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element1'); 
}   

}


  </script>

And:

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

Answer 4

So I know this is an old question but I just stumbled across it. The solution I came up with isn't pretty, but it works.

For context, I have my google translate code in a div with a class of, "gtr"

Using JS / jQuery

setTimeout(function(){
    $('.gtr').clone().appendTo('.drawer .nav-util li.gt');
}, 3000);

Answer 5

If using IFrames is an option you could put this code into separate page Iframe.html

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

Then

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Google Translate</title>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?b=googleTranslateElementInit"></script>
</head>

<body>

<div id="header" style="background-color: red;">
    <iframe src="IFrame.html"></iframe>
    <strong>A</strong>
</div>

<div id="footer" style="background-color: blue;">
    <iframe src="IFrame.html"></iframe>
    <strong>B</strong>
</div>
</body>
</html>

Answer 6

This is practically not achievable as Google has not built it to work with multiple instances on the page at all. After hacking with the code a little, this is the best you can achieve http://jsbin.com/hiwazedi/1/

To get this to work how you want, you would have to download and host all the files yourself and make heavy modifications. Seeing as how all the code is obfuscated, this wouldn't be easy. It would also most likely break after a while if and when Google updates how it works on their end. Lastly this would most likely be against their terms of service.

Another solution

The only reason I could see you wanting to do this is to display it in the header and footer for example. If so I would either position it fixed, so that the user can see it where ever they scroll on the page. Alternatively you could detect when the user is near the bottom of the page and move it to the footer.