- This topic has 0 replies, 1 voice, and was last updated 1 year, 2 months ago by Yusuf.
- February 21, 2020 at 6:16 am #86298Spectator@yusuf
In April 2016, the popular technology giant, Google, made a ground-breaking creation. It was the birth of a powerful language-translation tool called Google Translate. It exists as both a web and a mobile application. Interestingly, the mobile app can translate words and phrases even in offline mode. Google took the translation technology a step further, by recently launching the WordLens app, which translates writings in images in realtime.
Over the years, it gained dominance as a useful day-to-day translation tool, used by more than 500 million people. It translates a staggering 100 billion words per day. With about 103 languages supported, it boasts of a large user base, most of which reside outside of the United States of America.
In this post, we will learn how to add the Google Translate tool to our website. By leveraging Google Translate to translate the content of a website programmatically, so that visitors don’t need to leave the current browser tab to translate the page.
Let’s jump right in.
To successfully make Google Translate come alive on our website, we need three key components.
- Import Google Translate API reference, to allow us to translate on our page.
- A div element with an id (google_translate_element, in our example), to contain the select box for choosing a language.
- the function that gets called when the select box is changed.
The Google Translate API reference
The div element will serve as the container of the select box, to be loaded by the API.
The value of this select box will later be used in the
googleTranslateElementInit()function, this function is discussed below.
The googleTranslateElementInit function
It instantiates a new TranslateElement object and passes the source language and the target language as arguments. In this example, the target language is the content of the select box.
Below we successfully translated our website from English to Chinese.
- You must be logged in to reply to this topic.