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

<!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?cb=googleTranslateElementInit"></script>
</head>

<body>

    <div id="header" style="background-color: red;">
        <div id="google_translate_element"></div>
        <script type="text/javascript">
            function googleTranslateElementInit(){
                new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
            }
        </script>
        <strong>A</strong>
    </div>

    <div id="footer" style="background-color: blue;">
        <div id="google_translate_element"></div>
        <script type="text/javascript">
            function googleTranslateElementInit(){
                new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
            }
        </script>
        <strong>B</strong>
    </div>
</body>
</html>

Below I've listed out some things that I've tried and it's result. Every test I revert back to the default code shown above.

Test 1: 2 header scripts that call element.js but change the 2nd ?cb=googleTranslateElementInit to my footer translate function.

Result: Only the id="header" Translate shows up.

Test 2: In my id="footer" translation function call I change the second parameter to a seperate ID than the id="header function call. so it looks like this: new google.translate.TranslateElement({pageLanguage: 'en'}, 'test'); I then change my id="footer" translation div to match the parameter.

Result: Only the id="footer" Translate shows up.

Test 3: Add a 2nd translation script to the footer and change ?cb= to ?cb=translateTest. I also change my id="footer" translate function call to match translateTest and the parameter / translate div id to test.

Result: Only the id="footer" Translate shows up.

score 6 · Answer 1 · answered Apr 10 '17 at 03:00

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>

In my case I was using Bootstrap modals and needed to show the translation button either on the main page or in each modal, so what I did was exceedingly simple: `$('.modal').on('hide.bs.modal', function (e) { $('#google_translate_element').detach().appendTo('#translator_here'); }) $('.modal').on('show.bs.modal', function (e) { el = $(this).find('.translate-in-modal'); $('#google_translate_element').detach().prependTo(el); })` — Sprachprofi, Jul 24 '17 at 19:19
I can confirm this answer works perfectly. Thank you for saving my time. — Terry Lin, Sep 18 '18 at 03:39

score 3 · Answer 2 · answered Apr 05 '14 at 18:28

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.

These are the simplest solutions, and I believe "Another solution" is the cleanest. — Nick, Mar 31 '17 at 20:05
cannot believe we have to go through these hacks. why would google prevent this :( — Aamir Afridi, Jan 08 '19 at 15:15

score 1 · Answer 3 · edited Mar 25 '19 at 11:52

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>

score 0 · Answer 4 · answered Apr 08 '14 at 13:56

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>

It will only translate contents inside the iframe. – Howdy_McGee Apr 08 '14 at 14:48 — Howdy_McGee, Apr 08 '14 at 14:48

score 0 · Answer 5 · answered Dec 17 '15 at 04:15

0

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);

answered Dec 17 '15 at 04:15

tfer77

786
1
6
16

Clones the element - but breaks the translate functionality as all events etc are lost during the clone process. – Rob Mar 28 '17 at 23:18
My last comment was sloppy. I should have said "Clones the element, but breaks the translate functionality as the clone is added to the DOM after the page has loaded. The event had already been delegated before the clone was created, so isn't applied to the clone." – Rob Jun 15 '17 at 10:24

score 0 · Answer 6 · answered May 24 '17 at 14:12

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>

parser-blocking, cross site (i.e. different eTLD+1) script, http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInitRWD, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details. — Terry Lin, Sep 18 '18 at 02:54

Md Khairul Islam · Answer 7 · 2022-07-04T18:24:43.560

0

function googleTranslateElementInit() {
    if (window.innerWidth < 1024) {
        console.log("mobile")
       new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_elementMobile');
    
    } else{
          console.log("Desktop")
        new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
    }   
    
    }

edited Jul 04 '22 at 18:24

answered Jun 21 '22 at 04:04

Md Khairul Islam

371
2
4

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the [help center](https://stackoverflow.com/help/how-to-answer). – Ethan Jun 25 '22 at 02:25

Multiple Instances of Google Translate

7 Answers7

Another solution

Linked