The way the gadget works is (apparently) to translate anything it sees: static text as well as new text added to the DOM. It uses a small flash component (from google) to help with this.
|The Visualization translated to French|
by the Google Translation Gadget
What the Gadget Does
Here's a before and after for some of the static text:
Original Contents of DOM:
What DOM Looks Like after Google Translator Plugin Has Translated to French:
I'm not sure why it inserts the extra font/font tags, but they seem harmless so far.
Just Using Google's Gadget Code is not Enough
The first thing I did was to just plop the plugin on the site, and see what happened. It worked, but the flickering because of the dynamic translation of the country names and various other text in popups was distracting.
So, I modified things so that when it loads the countries on page load, it appends the country names to the DOM in a hidden div. These elements are then used whenever the country name is needed. This seems to work when the language is changed because the plugin churns through that whole static list in one fell swoop when that happens, and then when you grab the contents of a specific element, you get the translated text.
What I haven't dealt with yet are the city names. They could probably be cached in the DOM, too, as they occur (and cleared when the language changes - which you can detect based on contents of the plugin html itself). Right now, it will translate the cities as they appear, but this is not as distracting as the other things were.
Use of the Gadget is Free
I was confused about the relationship between this plugin and google's translate api. The translate api costs money. However, using the plugin is free (https://developers.google.com/translate/v2/faq):
(Referring to the Google Translate API):
Is there any free quota?
Preventing Translation on Certain Elements
If you add the css class "notranslate" to an element, then the gadget will not try to translate whatever is inside. For now, I used this for some abbreviations, numbers, and dates. I also added this class to the text it gets from the static lists. This is because otherwise the gadget seemed to want to untranslate it and then translate it back, which resulted in flickering.
How Good are the Translations?
I have no idea how good the translations are. They might come out goofy. However, another cool thing is that the gadget allows the user to submit suggested improvements, and you can view these on your personal gadget manager page.
Please feel free to let me know of quirks, etc. I don't have a computer with IE with me, so I don't know how well it works with that browser.