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

Sélectionnez "anglais" dans la liste déroulante ci-dessous.

Notez l'ajout d'une barre de menus qui permet entre autres de revenir au texte original.
Mais comment ça marche ?

Installer le service de traduction GOOGLE 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>

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');
	}

Retour menu