Tutoriel sur l’API Google Maps avec la géolocalisation HTML5

Tutoriel API Google Maps HTML5
Ce tutoriel vient en complément au Tutoriel de géolocalisation en HTML5, et vous apprendra à exploiter les informations de géolocalisation que vous y avez obtenu sur une carte Google Maps.
Nous allons réaliser une application qui affiche votre position sur une carte et trace votre parcours en suivant vos déplacements.

L’API Google Maps

Tout d’abord, il est essentiel de bien comprendre ce qu’est une API. Toute application web peut choisir d’autoriser des développeurs tiers à utiliser une partie de ses fonctionnalités. Ces fonctionnalités peuvent être accédées de plusieurs manières :

  • en téléchargeant une bibliothèque de fonctions pour l’inclure sur son site
  • en récupérant une donnée précise en construisant une URL (Google Charts)
  • En incluant directement la bibliothèque en ligne

Concernant Google Maps, on est dans ce dernier cas, c’est à dire qu’on va directement inclure la bibliothèque Google Maps dans notre Javascript.

Inclure Google Maps

Pour inclure les fonctions Google Maps dans notre application, nous ajoutons une balise script dans la partie head de notre page :

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>

L’API Google Maps est disponible sous plusieurs déclinaisons, que l’on peut choisir en ajoutant un paramètre à cette URL.
Parmi ces paramètres on retrouve :

  • L’utilisation ou non du GPS : “sensor”
  • La langue des textes affichés sur la carte : “language”
  • Le pays : “region”

Dans le cadre de ce tutoriel nous allons simplement activer l’utilisation du GPS avec le paramètre “sensor” que l’on va passer à “true” :

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Concernant les autres paramètres je vous invite à aller lire la documentation officielle (en anglais).

Création de la structure de notre page

Notre carte va venir se loger dans un simple div, auquel nous allons attribuer l’id “map_canvas”.

<div id="map_canvas"></div>

Afin que la carte s’affiche en plein écran, et qu’elle le fasse correctement sur tous les navigateurs, nous allons ajouter les propriétés de style suivantes :

  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { width: 100%; height: 100% }
C’est quoi ces histoires de height et width à 100% ?

Pour afficher la carte en plein écran avec des valeurs en pourcentages, les navigateurs les plus âgés auront besoin que l’on définisse également en pourcentage la taille des éléments parents. On indique donc également une “height : 100%” pour la balise “body” et pour la balise “html”.

Nous allons également ajouter une balise meta dans le head de notre html afin que l’utilisateur ne puisse pas réduire ou agrandir la carte :

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Et voilà ! Nous avons maintenant une page html prête à accueillir une Google Map. Voici ce à quoi devrait ressembler votre code pour le moment :

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	  html { height: 100% }
	  body { height: 100%; margin: 0px; padding: 0px }
	  #map_canvas { height: 100% ; width:100%;}
	</style>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>	
</head>
<body>
	<div id="map_canvas"></div>
</body>
</html>

Un rapide aperçu dans le navigateur nous montre… qu’absolument rien ne s’affiche, et c’est tout à fait normal ! Un peu de patience, la magie va agir très bientôt.

Afficher la carte Google Maps

Bien, il est temps de passer aux choses sérieuses !
Nous souhaitons afficher la carte une fois notre page html chargée. Pour cela nous allons ajouter l’attribut “onload” à notre balise “body” :

<body onload="initialize()">

Puis créer la fameuse fonction “initialize()” dans un script javascript.

	<script type="text/javascript">
		function initialize() {
	
		}	
	</script>

Cette fonction va, comme son nom l’indique, initialiser la carte Google Maps. Dans le cadre de ce tutoriel, nous allons créer une carte :

  • Contenue dans notre div “map_canvas”
  • Centrée sur les coordonnées 48.858565, 2.347198 (ce qui représente Châtelet à Paris)
  • De niveau de zoom 19 (très précis afin de pouvoir tester facilement les déplacements un peu plus tard)
  • En mode “ROADMAP” c’est à dire un plan classique, sans image satellite ni relief

Ces paramètres sont à fournir à l’instanciation de l’objet google.maps.Map comme ceci :

		function initialize() {
			map = new google.maps.Map(document.getElementById("map_canvas"), {
			      zoom: 19,
			      center: new google.maps.LatLng(48.858565, 2.347198),
			      mapTypeId: google.maps.MapTypeId.ROADMAP
			    });		
		}	

Revenons un peu sur ce code…

Tout d’abord, le premier paramètre correspond à l’élément du DOM dans lequel va être injecté notre carte (ici “map_canvas”, que l’on récupère grâce à document.getElementById()). Ensuite, le second paramètre, les options, doivent être fournies sous cette forme : {nom: valeur, nom: valeur, …}.
On remarque que les coordonnées du “center” sont fournies au travers d’un nouvel objet : google.maps.LatLng. Il en sera ainsi dès que l’on voudra définir la latitude et longitude d’une coordonnée.
Enfin “mapTypeId” correspond au type de carte à afficher :

  • ROADMAP pour le plan
  • SATELLITE pour les photos satellite
  • HYBRID pour afficher les photos satellites avec le plan superposé
  • TERRAIN pour afficher les reliefs

Allez, cette fois on peut ouvrir la page html dans son navigateur et… bingo ! Voilà un beau plan centré sur Châtelet ! Si possible, testez avec un smartphone afin de voir que les boutons de zoom, et de changement de vue apparaissent bien et qu’ils soient de la bonne taille. En effet si vous avez oublié la balise meta ils seront minuscules et inaccessibles…

Bon c’est bien joli ton truc mais je ne vois pas où est l’HTML5 là dedans !

Patience on y arrive… Puisqu’on va maintenant utiliser la géolocalisation HTML5 !

Ajouter la géolocalisation HTML5

Tout d’abord je précise à nouveau qu’il est nécessaire que vous maitrisiez la géolocalisation en HTML5 car ses principes ne seront pas réexpliqués dans ce tutoriel.

Pour commencer, à la suite de la fonction initialize(), nous testons la compatibilité du navigateur avec la géolocalisation HTML :

		if (navigator.geolocation)
			var watchId = navigator.geolocation.watchPosition(successCallback,
																null,
																{enableHighAccuracy:true});
		else
			alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");

Vous pouvez noter que je n’utilise pas d’errorCallback, ceci afin de ne pas alourdir le code et se concentrer sur l’essentiel.
A chaque mise à jour de la position de l’utilisateur, la variable “position” dans successCallback est mise à jour. De plus, la méthode panTo() permet de centrer la carte sur de nouvelles coordonnées. Par conséquent nous allons ajouter à notre successCallback :

map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));

Et pour représenter la position exacte, nous allons placer un marqueur sur la carte comme ceci :

				var marker = new google.maps.Marker({
					position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
					map: map
				}); 

Nous avons donc à présent :

		function initialize() {
			map = new google.maps.Map(document.getElementById("map_canvas"), {
			      zoom: 19,
			      center: new google.maps.LatLng(48.858565, 2.347198),
			      mapTypeId: google.maps.MapTypeId.ROADMAP
			    });		
		}	
		
		if (navigator.geolocation)
			var watchId = navigator.geolocation.watchPosition(successCallback,
																null,
																{enableHighAccuracy:true});
		else
			alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");		
		
		function successCallback(position){
			map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
			var marker = new google.maps.Marker({
				position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
				map: map
			}); 
		}

A chaque déplacement effectué par l’utilisateur, un nouveau marqueur est placé sur la carte afin d’indiquer votre nouvel emplacement. Sympathique non ?

Notez cependant que si vous faites le test dans la rue avec votre smartphone, dès que le GPS perd le signal, votre position sera replacée au point relais auquel votre 3G est rattachée, ce qui est beaucoup moins précis.

Et voilà ! A ce stade vous avez toutes les connaissances pour exploiter la géolocalisation en HTML5 au travers de l’API Google Maps. Les plus curieux d’entre vous pourront pousser leurs recherches un peu plus loin en parcourant la documentation de l’API Google Maps, afin d’exploiter aux mieux les très nombreuses fonctionnalités proposées par l’API.

Bonus : le tracé du parcours

Vous en voulez encore ? Parfait ! Nous allons ajouter à notre application la cerise sur le gâteau qui épatera vos proches ! (qui ont cependant 9 chances sur 10 de vous répondre “Ben qu’est-ce que ça a de si formidable ? C’est l’application Google Maps quoi…”, mais ne perdez pas espoir !).

Afin de parfaire notre application nous allons donc tracer une ligne qui va représenter le chemin suivi par l’utilisateur. Pour ce faire, nous allons avoir recours à l’objet google.maps.Polyline.
Un “Polyline” est une ligne tracée entre plusieurs points. Dans le cadre de cet exemple, à chaque nouvelle position de géolocalisation, nous allons tracer une ligne reliant la position précédente à la nouvelle.

Un Polyline se crée de la manière suivante :

					var newLine = new google.maps.Polyline({
						path: newLineCoordinates,	       
						strokeColor: "#FF0000",
						strokeOpacity: 1.0,
						strokeWeight: 2
					});

Les 3 derniers paramètres servent à définir l’apparence du tracé (qui sera donc rouge dans cet exemple), et le premier paramètre est un tableau de coordonnées, c’est à dire :

var newLineCoordinates = [
new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),
 new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
];

Cette variable doit être créée avant newLine bien entendu.
On remarque la variable “previousPosition” qui n’est pas encore définie. Nous allons le faire immédiatement en déclarant une variable globale tout en haut de notre script :

var previousPosition = null;

Cette variable contiendra en permanence la position précédente afin d’effectuer le tracé du Polyline.
Une fois toutes ces informations fournies pour la création du Polyline, il suffit d’ajouter ce dernier à notre carte :

newLine.setMap(map);

Enfin, on attribue la valeur courante de position à previousPosition :

previousPosition = position;

Ce qui donne le code suivant :

		var previousPosition = null;
	
		function initialize() {
			map = new google.maps.Map(document.getElementById("map_canvas"), {
			      zoom: 19,
			      center: new google.maps.LatLng(48.858565, 2.347198),
			      mapTypeId: google.maps.MapTypeId.ROADMAP
			    });		
		}	
		
		if (navigator.geolocation)
			var watchId = navigator.geolocation.watchPosition(successCallback,
																null,
																{enableHighAccuracy:true});
		else
			alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");		
		
		function successCallback(position){
			map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
			var marker = new google.maps.Marker({
				position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
				map: map
			}); 
			if (previousPosition){
				var newLineCoordinates =
				[
					new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),
					new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
				];
						
				var newLine = new google.maps.Polyline({
					path: newLineCoordinates,	       
					strokeColor: "#FF0000",
					strokeOpacity: 1.0,
					strokeWeight: 2
				});
				newLine.setMap(map);
			}
			previousPosition = position;
		}

On a également ajouté une condition sur l’existence de la variable previousPosition, afin de ne pas déclencher d’erreur lors de la première exécution du code.

Si vous testez ce code sur votre smartphone, vous remarquerez que chaque coupure du signal GPS provoque le tracé de lignes vers le point très éloigné de votre anterre 3G la plus proche. Afin de pallier à ce défaut, nous pouvons faire appel à l’une des propriétés très intéressantes de l’objet position.coords. Si vous avez bien suivi le précédent tutoriel vous devriez avoir deviné qu’il s’agit de la propriété “accuracy” !

Afin de ne jamais prendre en compte les coordonnées imprécises du Wifi et de la 3G sans GPS, il nous suffit donc d’ajouter un seuil de précision minimal en mètres qui va englober tout le contenu du successCallback.

		function successCallback(position){
			if (position.coords.accuracy < 100){
// Affichage du marqueur et du Polyline
			}
		};	

Et voilà c’est terminé ! Vous pouvez maintenant voir en oeuvre la démonstration de ce tutoriel ici :

Démonstration de géolocalisation HTML5 avec l’API Google Maps

J’espère que ce tutoriel vous a plu, et qu’il a rendu un peu plus concrète l’utilisation de la géolocalisation en HTML5. C’est vrai qu’avoir des chiffres qui bougent c’est bien, mais une carte c’est mieux !
A très bientôt pour de nouveaux tutoriels !

20 thoughts on “Tutoriel sur l’API Google Maps avec la géolocalisation HTML5

  1. très bien et très explicite, mais il n’a pas répondu à la question que je me pose depuis un moment, je cherche à placer un marqueur par le biai d’une adresse; comme puis-je faire pour que la carte trouve d’elle même la latitude longitude etc… ?
    merci d’avance

    • Salut evdog,

      Si tu veux faire ça, il va te falloir te plonger dans l’API Google Maps, qui à mon avis propose des méthodes qui, à partir de chaînes de caractères te renverront la latitude et longitude ! Personnellement je n’ai encore jamais utilisé de telles fonctions mais je suis à peu près sûr qu’elles existent.

      Bon courage !

    • il va falloir faire appele à la fonction de géocodage pour afficher le marqueur par le biais d une adresse, voir API google map

  2. Salut

    Merci pour le tuto mais comment définir une taille personnalisée pour la map ? J’ai l’impression qu’on est obligé de mettre en 100% pour pouvoir l’afficher sinon on doit virer le doctype pour que ça fonctionne et ça bug sous ie U_U.

    Une idée (autre que les frame =/) ?

    • Honnêtement je n’en ai aucune idée ! Cela sort du contexte d’HTML5 et concerne directement Google Maps, donc je pense que tu devrais pouvoir trouver ta réponse sur les forums Google adaptés.

      Bon courage en tout cas !

  3. Pile poil ce que je cherchais pour me mettre dans le bain de cette API, par contre je vais devoir me plonger un peu plus dans la doc de Google.

    Un grand merci !

  4. Très bon tutoriel, merci à toi.
    Cependant une question me reste. Comment faudrait-il faire pour que l’ancien marqueur s’en aille et qu’il ne reste que le marqueur de la position actuelle ?

    • Salut Fabien,
      Cherche dans l’API JS Google Maps s’il y a une méthode pour masquer un google.maps.Marker :)
      Je suis certain qu’elle existe !

      • Effectivement un simple setMap(null) juste avant l’ajout du nouveau marqueur dans la fonction successCallback suffit à faire disparaître l’ancien marqueur.
        Pour ceux que ça pourrait intéresser :
        if (marker != undefined) {
        marker.setMap(null);
        }
        Encore merci pour ce tutoriel. On voit bien que HTML5 est vraiment tourné vers les mobiles et ça facilite beaucoup la tâche pour la création de sites mobiles.

        • Bonjour,
          Etant novice je suis votre tutoriel avec grand intérêt mais lors de mes essais je n’arrive pas à supprimer les anciens marqueurs.
          Pourriez-vous préciser où insérer le code :
          if (marker != undefined) {
          marker.setMap(null);

  5. Si on arrive à avoir la position, on pourrait aussi l’envoyer sur le serveur et la stocker dans une base Mysql avec un get ou un post ?
    Comment pourrait-on faire ça ? Un formulaire avec des champs “hidden” ? Mais comment générer un refresh toutes les x minutes en automatique? Une idée?

    • Tout à fait, il est possible d’utiliser des requêtes AJAX en JavaScript pour envoyer cette information au serveur. A chaque fois que le successCallback est appelé, tu utilises jQuery pour faire une requête AJAX GET par exemple.
      Mais de manière générale, il est préférable de se baser sur la localisation de l’IP côté serveur plutôt que côté client, car si le client refuse le partage tu n’obtiens aucune information.

  6. Bonjour,

    excellent tuto !! je me pose une question: ce script propose à la personne qui tien le smartphone de voir sa progression mais comment faire pour que d’autre personnes puissent voir le trajet en temps réel ??

    je fais parti d’une association qui propose des randos roller gratuitement dans les rues de Nancy et je pense qu’il serait intéressant de suivre la rando depuis un PC ou smartphone en temps réel.

    Il est possible de partager le trajet en temps réel sur google map ou il faut absolument que je sauvegarde les coordonnées GPS dans une base SQL et ensuite j’utilise l’API google map pour afficher les points à partir de la base SQL ?

    • Effectivement, il va falloir utiliser une base de données pour stocker les coordonnées des utilisateurs, ce qui dépasse donc largement le cadre de cette simple application qui ne fonctionne que localement dans le navigateur :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>