Exemple de géolocalisation HTML5 avec l’API Google Maps

Cet exemple affiche une carte utilisant l’API Google Maps ainsi que les données de géolocalisation afin de situer l’utilisateur grâce au GPS de son téléphone. L’application affiche le tracé du parcours de l’utilisateur s’il se déplace et place un marqueur à chaque nouvelles coordonnées reçues par le service de géolocalisation :

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

Cet exemple est le produit final du Tutoriel sur l’API Google Maps avec la géolocalisation HTML5.

Code source de la démonstration :

<!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>	
	<script type="text/javascript">

		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;
		};		
	</script>
</head>

<body onload="initialize()">
	<div id="map_canvas"></div>
</body>

</html>

16 thoughts on “Exemple de géolocalisation HTML5 avec l’API Google Maps

  1. Salut,

    Merci beaucoup pour ces super tuto, je suis impressionné par la simplicité et la pédagogie de tes pages. J’essaye d’appliquer (avec mon petit niveau) ton tutorial à ma page, mais je n’arrive pas à adapter le script pour initialiser la carte sur ma position…

    merci encore,
    Cimourdain

    • Salut Cimourdain,
      Merci bien pour ce commentaire ! Content de voir que tu mettes en pratique ce tutoriel.
      En fait, le service de géolocalisation prend toujours un certain temps avant de te donner tes coordonnées, par conséquent le mieux est d’initialiser la carte à des coordonnées quelconques (dans mon exemple j’ai mis le centre de Paris), puis une fois que tu reçois les coordonnées dans la fonction successCallback, tu déplaces la carte sur la position obtenue. C’est ce qui est d’ailleurs fait dans cet exemple.
      Lis bien les 2 tutoriels du site sur le sujet et tu devrais t’en sortir :)
      Merci en tout cas !

  2. Bonjour et merci pour ce tres bon tutoriel…

    Sais tu s’il est possible de faire une ligne qui suit le contour de la route plutot qu’une PolyLine classique ? (comme c’est le cas dans Google Maps pour une carte personnalisée ou l’on peut choisir entre les 2 types de tracés).. j’ai un peu cherché dans l’api mais pas trouvé.

    Merci d’avance.
    Raphael

  3. Bonjour,

    Avec Firefox 6.0.1, et malgré l’autorisation que cette application demande, je ne vois pas le marqueur indiquant ma position (même approximative).
    Je vois en fait plusieurs comportements : soit il centre sur “Châtelet”, soit il centre sur ma position approximative (quand même), mais n’affichent ni marqueur, ni cheminement….
    Sur d’autres sites, cette fonction de géolocalisation est tout aussi aléatoire…

    Je cherche donc à voir : un aperçu de résultat de ce script, et si ce script fonctionne bien sous Firefox 6…

    Merci !

    • Salut David,

      Dans tous les cas, lorsqu’il s’agit d’applications utilisant le GPS telle que celle-ci, elles n’ont d’intérêt que sur les appareils mobiles, donc le support des navigateurs de bureau tels que Firefox n’est pas très important. Tu peux te connecter avec un smartphone Android ou iPhone sur la démo, puis te déplacer un peu devant chez-toi pour voir ce qui se passe dans l’appli. Dans tous les cas concernant le support, Firefox est l’un des navigateurs qui a le support le plus stable de tous : http://caniuse.com/#search=geolocation.

      Bon courage !

      • Bonsoir,

        J’ai testé via Android le lien de ta démo, c’est vrai que cela reste très approximatif, ça ne concurrencera pas encore les applications mobiles qui usent de la géolocalisation, mais c’est encore pire depuis Firefox sur mon PC, je me demande s’il ne se positionne pas sur mon NRA…

        Penses-tu que cela ça s’arranger avec le temps ? (le temps qu’on voit en plus grand nombre des sites en HTML 5)

        A+

        • Salut Philippe,

          La précision des applications géolocalisées web et mobiles reposent sur les mêmes technologies (elles utilisent les mêmes composants disponibles sur le téléphone – à savoir GPS, informations réseau, WiFi). La différence de précision “perçue” n’est donc pas du à ça mais à la façon de manipuler les informations de géolocalisation. Sur une application native par exemple, un traitement de fond peut tester de temps en temps la position sans que l’on s’en rende compte et ainsi calculer une approximation de meilleure qualité. Une page web n’ayant pas accès aux mêmes fonctionnalités de tâches de fond, il est normal qu’elle ne puisse pas faire ces calculs (il faudrait que le navigateur soit toujours ouvert sur l’onglet en question pour prétendre avoir la même richesse qu’une application Google Maps native par exemple). Le navigateur aura plus de libertés et de fonctionnalités du téléphone accessibles dans un futur proche, mais en attendant, il est déjà bien pratique de pouvoir utiliser une géolocalisation HTML5 assez approximative pour indiquer la ville dans laquelle se trouve l’utilisateur par exemple :)

          Bonne continuation !

  4. Merci pour ce tutoriel , qui est vraiment intéressant !!

    j’ai ma position GPS dans une base de données et je voudrais la récupérer et la mettre dans ce code . comment faire ??

    merci d’avance !!

    • Cette question est en fait d’ordre plus général :
      “Comment transférer des informations du serveur vers JavaScript”
      Tu peux soit :

      • Directement écrire du JS depuis ton serveur lors de l’exécution: var myJsVar = < ?php echo $stuff ?>, ce qui est utile pour charger certaines valeurs initialies.
      • Soit faire un appel AJAX depuis le client vers ton serveur pour obtenir l’information.
  5. Merci pour ce trés bon tuto..

    Est il possible en plus d’afficher la localisation de la personne qui excecute la page, des points d’interet tirer d’une base de données avec longitute et latitude autour de la personne ?

    merci :)

    • Bien sûr, vous pouvez tout faire à partir de ces données. Mais il faut les avoir ces points d’intérêt dans la base de données !

      • Merci de votre réponse, j’ai bien ces points en base, le souci c’est que je ne comprends pas bien comment fonctionne l’api google, et comment afficher les points en plus

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>