구글 웹페이지 번역 API (예전 건 안되서..)

<?
/*===========================================
구글 웹사이트 번역 플러그인 START 
============================================*/
?>
<style type="text/css">
	/*상단 플로팅 바 옵션 가리기  */
	body { position: static !important; top:0px !important; }	
	iframe.goog-te-banner-frame { display: none !important; }
	.skiptranslate { display: none !important; }

	.goog-logo-link { display:none !important; } 
	.goog-te-gadget { color: transparent !important; overflow: hidden;} 
	.goog-te-balloon-frame{display: none !important;} 
	.goog-tooltip {display: none !important;}
	.goog-tooltip:hover {display: none !important;}
	.goog-text-highlight {background-color: transparent !important; border: none !important; box-shadow: none !important;}
</style> 


<div id="google_translate_element" style="visibility: hidden; position: absolute; top: 0px;"></div>
<div class="translation-icons" style="visibility: hidden; position: relative; text-align: center; margin:0px; padding:0px; zoom:1"> 
	<table width="100%" border="0" cellspacing="0" cellpadding="0" >
	<colgroup>
		<col width="20%">
		<col width="20%">
		<col width="20%">
		<col width="20%">
		<col width="20%">
	</colgroup>
	<tr class="translation-links">
		<td><a href="javascript:void(0)" class="ko" data-lang="ko" data-placement="0"><img src="/icon-lang/KR-128.png" alt='한국' style="width:100% !important; display:block; line-height:0; padding:4px !important;" /></a></td>
		<td><a href="javascript:void(0)" class="gm" data-lang="de" data-placement="1"><img src="/icon-lang/GM-128.png" alt='독일' style="width:100% !important; display:block; line-height:0; padding:4px !important;" /></a></td>
		<td><a href="javascript:void(0)" class="en" data-lang="en" data-placement="2"><img src="/icon-lang/US-128.png" alt='미국' style="width:100% !important; display:block; line-height:0; padding:4px !important;" /></a></td>
		<td><a href="javascript:void(0)" class="ja" data-lang="ja" data-placement="3"><img src="/icon-lang/JP-128.png" alt='일본' style="width:100% !important; display:block; line-height:0; padding:4px !important;" /></a></td>
		<td><a href="javascript:void(0)" class="cn" data-lang="zh-CN" data-placement="4"><img src="/icon-lang/CN-128.png" alt='중국' style="width:100% !important; display:block; line-height:0; padding:4px !important;" /></a></td>
	</tr>
	</table>
	
</div> 
<div id="" style="text-align:center; padding-top:0px;">
	<img src="/icon-lang/google_logo_300.png" alt='구글 번역 api' style="width:110px;"/> 
</div>

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
	$('.translation-icons').css('visibility', 'visible');
	
	/* 구글 번역 초기화 */
	function googleTranslateElementInit() {
		new google.translate.TranslateElement({pageLanguage: 'ko',autoDisplay: true}, 'google_translate_element');
		//아래처럼 언어른 지정하면 구글의 언어 선택 셀렉트 박스가 안나옴. 그래서 goog-te-comb 찾지 못해서 오류 발생 
		//new google.translate.TranslateElement({pageLanguage: 'ko', includedLanguages: 'de,en,ja,ko,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
	}

	/* 새 UI 선택 클릭 이벤트가 발생하면
	감춤 처리한 구글 번역 콤보리스트에
	선택한 언어를 적용해 변경 이벤트를 발생시키는 코드  */
	document.querySelector('.translation-links').addEventListener('click',function(event) {
		let el = event.target;
		if(el != null){
			while(el.nodeName == 'FONT' || el.nodeName == 'SPAN' || el.nodeName == 'IMG'){el = el.parentElement;}//data-lang 속성이 있는 태그 찾기
			const tolang = el.dataset.lang; // 변경할 언어 코드 얻기
			const gtcombo = document.querySelector('.goog-te-combo');
			if (gtcombo == null) {
				alert("Error: Could not find Google translate Combolist.");
				return false;
			}
			gtcombo.value = tolang; // 변경할 언어 적용
			gtcombo.dispatchEvent(new Event('change')); // 변경 이벤트 트리거
		}
		document.body.style.cssText = ""
		return false;
	});
</script>
<?
/*===========================================
구글 웹사이트 번역 플러그인 END 
============================================*/
?>

 

icon-lang.zip

0.02MB

 

 

* 오류 발생시

if (gtcombo == null) {
	alert("Error: Could not find Google translate Combolist.");
	return false;
}

이 오류 발생시..

 

번역을 적용 할 곳에 goog-te-menu-frame 클래스 추가

<body class="goog-te-menu-frame">
...생략...
</body>

 

 

 

구글 언어 셋

https://devlink.tistory.com/889