HTML & google : utilisez les services Google pour votre développement web

GOOGLE propose diverses services qu'il est relativement facile d'intégrer dans une page web.

Afficher une carte Google Maps dans une page web

Point besoin d'être développeur web chevronné pour intégrer une carte Google dans une page.
Il suffit d'ouvrir google.fr ; de saisir le nom d'une localité (ou région ou pays) puis de cliquer sur l'onglet "Maps". La carte apparait ! Il faut alors cliquer sur "partager" puis "intégrer une carte" pour obtenir du code HTLM qu'il suffit ensuite de coller dans la page.

Ci-dessus une carte correspondant à la commune de Calais.
Le code généré par l'application Google Maps est le suivant :

Attention pour intégrer une carte interactive ; par exemple celle correspondant à la géolocalisation de l'internaute c'est un peu plus compliqué ; il faut programmer en JavaScript en utilisant des API HTML5. Voir le tutoriel HTML5.

L'API google traduction

Google propose un service gratuit (pour combien de temps encore ? ) pour que la page web soit traduite dans la langue choisie par l'internaute.

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 boite 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.

Le projet OSM

Il y a une alternative à Google Maps : le projet OSM (OpenStreetMaps).

Donc si vous êtes allergique à Google vous pouvez facilement intégrer une carte OSM via un service en ligne : cartosm.eu. Par contre en ce qui concerne la version ANDROID de Chrome je n'ai pas trouvé la manip de déblocage ...
Retour menu