Installer sur votre site des services gratuits

Vous voulez insérer dans une page une carte interactive (avec géolocalisation du visiteur). Ou vous aimeriez que votre site soit multilingue. Ou vous souhaitez proposer aux visiteurs de votre site une zone de recherche par mots clés.
Vous pensez que tout cela est très compliqué à programmer, hors de vos capacités. Et bien, vous avez tort car il existe des services gratuits (mais en ligne) qu'il est facile d'implémenter dans votre site.

projet OpenStreetMap (OMS)
Google traduction
Google Maps
personnaliser Google (moteur de recherche) pour votre site

Projet OpenStreetMap (OMS)

Sachez qu'il existe une alternative à Google maps.

Google maps : service payant ?

En effet depuis Juin 2018, pour afficher dans une page web une carte google Maps dynamique (qui interagit avec la position GPS) il faut obtenir une clé API. Et pour obtenir cette clé il faut ouvrir un compte de facturation ...

Mais il existe un service de cartographie en ligne et gratuit : OpenStreetMap (OSM).

Mais OSM c'est uniquement une base de données cartographique en ligne. Pour afficher une carte OSM dynamique dans une page web il faut associer cette base de données à une API appelée leaflet.

API leaflet

Vous pouvez interagir avec le service OSM en ligne via l'API leaflet.
Leaflet.js est une librairie JavaScript de cartographie interactive open-source.
Cette API n'est pas intégrée dans le navigateur donc il faut la charger !

Utilisez l'API leaflet pour se connecter au service en ligne OSM est donc une alternative à la solution Google Maps.

Première carte avec leaflet

Le code HTML correspondant

...
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script type="text/javascript" src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
...
<body>
        <div id="carte" style="width:100%; height:100%"></div>
	...

Comme cette API n'est pas intégrée au navigateur il faut la charger. Attention l'API comprend non seulement un fichier javascript mais aussi une feuille de style.
Ici les deux fichiers sont récupérés sur un site : unpkg.com. On est donc assuré d'avoir la dernière version de la librairie.

Il faut créer une boite identifiée carte qui va contenir effectivement une carte.

Le script

        var ma_carte = L.map('carte').setView([50.94, 1.87], 12); 
		// centrer la carte sur Calais avec un niveau de zoom de 12

        var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
            attribution: '© OpenStreetMap contributors',       maxZoom: 19     });
		// définir un fond de carte
        ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée "ma_carte"

N'oubliez pas d'encadrer ce code dans le conteneur SCRIPT !

Avec la méthode L.map on définit le centre de la future carte et le niveau de zoom ; le centre a les coordonnées GPS 50.94 de latitude et 1.87 de longitude et un niveau de zoom de 12.
Avec la méthode L.tileLayer on définit une carte.
Ensuite il faut que cette carte devienne le "background" de la boite.

Deuxième carte

Nouveauté : un marqueur au centre de la carte !

Le rendu :

Le code HTML

...
 <link rel="stylesheet" href="../leaflet/leaflet.css" />
 <script type="text/javascript" src="../leaflet/leaflet.js"></script>
 ...
<body>
        <div id="carte" style="width:100%; height:100%"></div>
	...

Différence notable avec l'exemple précédent : on suppose que le dossier correspondant à la librairie a été récupéré sur le site https://leafletjs.com puis décompressé et installé en local.

Les différents fichiers du framework :

Notez le dossier "images" contenant les marqueurs.

Le script

	var ma_carte = L.map('carte', { zoomControl:false }).setView([48.80952, 7.776818], 13);
				
		var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
            attribution: '© OpenStreetMap contributors',
            maxZoom: 19     });
		// définir un fond de carte
        ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée ma_carte
			
		var marker = L.marker([48.804128, 7.776792]).addTo(ma_carte).bindPopup("<b>LIJE Creative</b>");

Le centre de la carte correspond à la position GPS de la ville de Hagueneau en Alsace !

Par rapport au script précédent une instruction supplémentaire pour positionner un marqueur au centre de la carte.

Indiquer à l'internaute sa position sur la carte via un marqueur

Il faut donc récupérer la position GPS de l'internaute grâce à l'objet geolocation de JS (qui est implémentée par tous les navigateurs récents) puis utiliser l'API leaflet pour définir le centre de la carte, ajouter le fond de carte et positionner le marqueur.

Le script correspondant : if(navigator.geolocation) navigator.geolocation.getCurrentPosition(fcarte) ; function fcarte(position) { var vlatitude = position.coords.latitude; var vlongitude = position.coords.longitude; var ma_carte = L.map('carte').setView([vlatitude, vlongitude], 17); var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors', maxZoom: 19 }); // définir un fond de carte ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée ma_carte var marker = L.marker([vlatitude, vlongitude]).addTo(ma_carte).bindPopup("<b>LIJE Creative</b>");

L'internaute est géolocalisé (si son navigateur l'autorise) et ses coordonnées sont récupérées dans deux variables.
Les méthodes L.map et L.marker sont alors argumentées avec ces deux variables.

Le rendu

Utilisation basique de Google Maps

Point besoin d'ouvrir un compte chez Google pour afficher une carte figée.

Point besoin d'être développeur web chevronné pour intégrer une carte Google statique 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 :

<iframe 
src="https://www.google.com/maps/embed?pb=...
width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen>
</iframe>

API google traduction

GOOGLE propose d'autres API qu'il est relativement facile d'installer dans une page web.
Maintenant je vais évoquer l'API Google traduction qui permet à un visiteur étranger de traduire toute la page dans sa langue maternelle. En implémantant cet outil, vous réalisez donc un site multilingue.

Installer le service de traduction GOOGLE dans une page web

C'est relativement simple. 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; "> <h5>Traduction</h5> </div>

Il faut ensuite écrire une fonction JS dont le code dont le code est le suivant <script> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'fr'}, 'traduction'); } </script>

Test

Pour voir comment ça marche, remontez tout en haut de la page. Juste au dessus du sommaire du tutoriel en cours, vous découvrez une petite boite bordurée de rouge avec pour légende "Traduction" et juste en dessous une liste déroulante.
Ouvrez cette liste et sélectionnez "anglais" et observez : toute la page est traduite dans cette langue.
C'est pas formidable ?

Créer un moteur de recherche interne sur son site Web sans programmer

Une courte vidéo qui vous explique comme utiliser Google comme moteur de recherche pour votre site

Personnalisation du moteur de recherche

5 minutes de boulot !
Vous devez avoir un compte Google.
Vous ouvrez le navigateur Chrome puis vous tapez l'URL : cse.google.fr
Vous précisez le nom de domaine de votre site. Par exemple : darchevillepatrick.info
Vous copiez le code proposé par "programmable search engine" dans la partie BODY de la page qui doit accueillir la zone de recherche.

Exemple de code proposé par cse.google.fr : <script async src="https://cse.google.com/cse.js?cx=33e24936714bb0f38"></script> <div class="gcse-search"></div>

Code que j'ai inséré dans la page d'accueil de mon site : index.htm

Dans mon site j'ai créé un moteur de recherche pour l'ensemble de mon site mais aussi pour chaque tuto du site.
Ainsi, à titre d'exemples, j'ai demandé la génération de code pour le domaine darchevillepatrick.info/bio (tuto de biologie aquatique) pour darchevillepatrick.info/pyton (tuto sur Python), darchevillepatrick.info/css (tuto sur le CSS), etc.

Utilisation du moteur de recherche personnalisé

Dans la zone de recherche de la page d'accueil, je tape, par exemple, "afficher heure et date courantes".
Le résultat de cette recherche pour cette question.

Dans la capture d'écran vous voyez des liens vers différentes pages appartenant à différents tutos de mon site.

Google ne peut s'empêcher d'afficher d'abord quelques annonces.
Faites défiler pour arriver aux liens vers votre site.

Traduction

Débuter en programmation web - sommaire

Initiation au HTML & CSS

Pour des pages dynamiques - initiation à PHP & SQL

Débuter en programmation web - recherche

L'auteur : Patrick Darcheville

Installer sur votre site des services gratuits

Projet OpenStreetMap (OMS)

Google maps : service payant ?

API leaflet

Première carte avec leaflet

Le code HTML correspondant

Le script

Deuxième carte

Le code HTML

Le script

Indiquer à l'internaute sa position sur la carte via un marqueur

Le rendu

Utilisation basique de Google Maps

API google traduction

Installer le service de traduction GOOGLE dans une page web

Test

Créer un moteur de recherche interne sur son site Web sans programmer

Personnalisation du moteur de recherche

Utilisation du moteur de recherche personnalisé