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?
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: