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

Tutoriel API Google Maps HTML5

Cet article a été écrit en 2010. Le web évoluant vite, il est possible que certains points soient maintenant obsolètes !

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

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 : Et voilà ! Nous avons maintenant une page HTML prête à accueillir une Google Map. Voici ce à quoi devrait ressembler votre code pour le moment : 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 : Puis créer la fameuse fonction initialize() dans un 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 : Ces paramètres sont à fournir à l'instanciation de l'objet google.maps.Map comme ceci : 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 : 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 : 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 : Et pour représenter la position exacte, nous allons placer un marqueur sur la carte comme ceci : Nous avons donc à présent : 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 : 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 : 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 : 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 : Enfin, on attribue la valeur courante de position à previousPosition : Ce qui donne le code suivant : 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. 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 !

Posted on