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.

Le site cartosm.eu

C'est le même principe que Google Maps ; vous sélectionnez une carte correspondant à une localité et il y alors génération du code HTML à ajouter dans votre page web pour publier ladite carte.

Ci-dessous l'interface du site qui permet de générer le code HTML. cartosm.eu

La capture d'écran ne fait pas apparaitre les possibilités de dimensionner la carte. Par défaut elle fait 400 par 350.

Ci-dessous affichage d'une carte OpenStreetMap obtenue à partir du site cartosm.eu.

Comme vous pouvez le constater la carte ne s'affiche pas !
L'exécution du code est bloquée car ce code contient un lien vers un site non sécurisé (protocole : http).
Il n'y a plus à espérer que le site cartosm.eu bascule au protocole https rapidement.

Le code HTML

Ci-dessous le fameux code HTML qui est bloqué :

Notez le lien vers un site non sécurisé.
Mais l'internaute peut cependant forcer l'affichage de la carte comme l'indique la capture d'écran ci-dessous !

Donc sous Chrome il suffit de cliquer à gauche de l'icône "ajouter aux favoris". S'ouvre alors une boite de dialogue. Puis il suffit de cliquer sur "charger scripts à risque" (texte en bleu).

Notez le changement qui se produit dans la barre d'URL du navigateur.
https est désormais barré de deux traits rouges et l'adresse du site est précédé de la légende "non sécurisé".
Sous Firefox et Edge on peut aussi débloquer le script. Par contre en ce qui concerne la version ANDROID de Chrome je n'ai pas trouvé la manip de déblocage ...
Retour menu