L'API google traduction

GOOGLE propose diverses API qu'il est relativement facile d'installer dans une page web.
Dans le cadre de la géolocalisation j'ai évoqué l'API Google Maps qui permet d'afficher dans un plan ou une photo satellite.
Maintenant je traite de l'API Google traduction qui permet à un visiteur étranger de traduire toute la page dans sa langue.

Exemple

Ci-dessous quelques phrases simples pour tester l'efficacité du traducteur en ligne. Sélectionnez "anglais" dans la liste déroulante ci-dessous.

Bonjour tout le monde !


Mon tailleur est riche.
Mon épouse est blonde.
Ma voiture est vieille mais roule encore bien.

Notez l'ajout d'une barre de menus qui permet entre autres de revenir au texte original.

Installer le service de traduction dans une page web

C'est relativement simple et selon les mêmes principes que l'installation de Google Maps.

Dans la partie HEAD il faut créer un lien vers le service de traduction mis à disposition par Google.

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Attention écrivez bien "https" (et non pas "http").

Il faut ensuite et dans la partie BODY, créer une boîte DIV vide mais qui sera remplie par l'API : une liste déroulante proposant toutes les langues possibles et la mention "powered by GOOGLE".
Le code correspondant de cette boite DIV :

<div id="traduction" style ="width : 30%; border : 1px solid red; margin : auto; "></div>

La règle de style est facultative.

Il faut ensuite écrire une fonction JS dont le code (sans les balises SCRIPT) est le suivant :

function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'fr'}, 'traduction'); }

Le script doit être placé en fin de page ; juste avant la balise fermante de BODY.
Retour menu