google translate combo box is shown twice

Question

I am using google translator for my website. However, when I run this on local host or ec2 instance, the google translator combo box is shown twice.

Here is my code.

<div id="google_translate_element" style="position: relative;z-index: 1;"></div> 

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,es,id,ru,tl,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

This is how it looks. Any idea why it shown twice?

Answer 1

I did try this code as is and see only one combo box, anyway you can try to delete one block of javascript, it seems that indeed there are two definitions for one combo box

Answer 2

The problem continues when you have chosen to translate a page and then click on a link (targeting same site) on that page. The page of the clicked link gets two "Translate bars/headers" at the top of the screen. The simple change to the original widget script below solved my problems:

<div id="google_translate_element" style="position: relative;z-index: 1;"></div>
<script type="text/javascript">
var g_gTranslateIsAdded = false;
function googleTranslateElementInit() {
    if (!g_gTranslateIsAdded ) {
        g_gTranslateIsAdded = true;
        new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'en,es,id,ru,tl,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
    }
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>