구글 번역 API

- 기본 전역 사용

<div id="google_translate_element"></div>

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
	function googleTranslateElementInit() {
    	new google.translate.TranslateElement(
        	{	
            	pageLanguage: 'en',
                includedLanguages: "en,ko,ja,zh-CN", // 사용할 언어 목록
                layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
            	autoDisplay: false
            }, 
            'google_translate_element'
        );
    }
</script>

<style lang='scss' scoped>
    #google_translate_element {display: inline-block;} 
    #google_translate_element .goog-te-gadget-simple { display: flex; align-items: center;}
    #google_translate_element .goog-te-gadget-simple .goog-te-gadget-icon  a { display: flex; }
</style>

 

- 동적 스크립트 로드후 사용

<div id="google_translate_element"></div>

<script>
    window.googleTranslateElementInit = () => {
      new window.google.translate.TranslateElement(
        {
          pageLanguage: "en", // 기본 언어 설정
          includedLanguages: "ko,en,ja,zh-CN", // 사용할 언어 목록
          layout: window.google.translate.TranslateElement.InlineLayout.SIMPLE,
          autoDisplay: false
        },
        "google_translate_element"
      );
    };

    // 스크립트가 이미 로드된 경우 초기화
    if (window.google && window.google.translate) {
      window.googleTranslateElementInit();
    } else {
      // Google 번역 스크립트 동적으로 로드
      <!-- 주석풀고 사용
      const script = document.createElement("script");
      script.src =
        "https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
      script.async = true;
      document.head.appendChild(script);
      -->
    }
</script>
<style lang='scss' scoped>
    #google_translate_element {display: inline-block;} 
    #google_translate_element .goog-te-gadget-simple { display: flex; align-items: center;}
    #google_translate_element .goog-te-gadget-simple .goog-te-gadget-icon  a { display: flex; }
</style>