1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9158],{11312:(e,n,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/api-google-maps-geolocalisation-html5",function(){return i(39319)}])},46833:(e,n,i)=>{"use strict";i.d(n,{A:()=>t});var s=i(74848),o=i(21055),a=i(53924);let t=e=>{let{src:n,alt:i,...t}=e;return(0,s.jsx)(o.E9,{src:n,alt:i,center:!0,my:a.vU,...t})}},32526:(e,n,i)=>{"use strict";i.d(n,{A:()=>a});var s=i(74848),o=i(21055);let a=e=>{let{year:n,lang:i="fr"}=e;return(0,s.jsx)(o.nC,{className:"deprecation-warning",textAlign:"center",children:(0,s.jsx)("p",{children:"fr"===i?(0,s.jsxs)(s.Fragment,{children:["Cet article a \xe9t\xe9 \xe9crit en ",(0,s.jsx)("strong",{children:n})," et peut contenir des informations obsol\xe8tes !"]}):(0,s.jsxs)(s.Fragment,{children:["This article was written in ",(0,s.jsx)("strong",{children:n})," and may contain outdated information!"]})})})}},85039:(e,n,i)=>{"use strict";i.d(n,{A:()=>a});var s=i(74848),o=i(21055);let a=e=>{let{children:n}=e;return(0,s.jsx)("aside",{children:(0,s.jsx)(o.P,{textAlign:"center",children:(0,s.jsxs)("em",{children:["â",n,"â"]})})})}},39319:(e,n,i)=>{"use strict";i.r(n),i.d(n,{default:()=>m});var s=i(74848),o=i(46833),a=i(77083),t=i(1),r=i(32526),l=i(85039),c=i(21055),u=i(85044);let d={src:"https://cdn.v1v2.io/_next/static/media/map-icon.6c76e9b2.png",height:67,width:124,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAAS1BMVEUvLBRwfFxojURyVSdZhKZikXSKvH4kSElulqyk3P92lE2NlUucs5WywYSZVyFhckqltLhtUiCXvct8dm6Ofyagy3uYi1eOuLG53enK293vAAAAFHRSTlMH+ImGdPfMH6b+K/z31sbNiZf8WHZ8zngAAAAJcEhZcwAACxMAAAsTAQCanBgAAAArSURBVHicBcGFAQAgDAOwottwh/8vJQFZyykHgEVu3B5ob5ylnAZm7cWAPhanAUlewRYWAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:4};var p=i(15741),h=i(53924);let g=()=>(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)("header",{children:[(0,s.jsx)(u.A,{mb:h.vU,children:"Tutoriel sur l'API Google Maps avec la g\xe9olocalisation HTML5"}),(0,s.jsx)(o.A,{src:d,alt:"Map",imageProps:{quality:100,priority:!0},mb:h.rf}),(0,s.jsx)(r.A,{year:2010}),(0,s.jsxs)("p",{children:["Ce tutoriel vient en compl\xe9ment au"," ",(0,s.jsx)(c.A,{href:p.Eq,children:"Tutoriel de g\xe9olocalisation en HTML5"}),", et vous apprendra \xe0 exploiter les informations de g\xe9olocalisation que vous y avez obtenu sur une carte Google Maps. Nous allons r\xe9aliser une application qui affiche votre position sur une carte et trace votre parcours en suivant vos d\xe9placements."]})]}),(0,s.jsxs)("section",{children:[(0,s.jsx)(c.H2,{children:"L'API Google Maps"}),(0,s.jsx)(c.nz,{children:"Tout d'abord, il est essentiel de bien comprendre ce qu'est une API. Toute application web peut choisir d'autoriser des d\xe9veloppeurs tiers \xe0 utiliser une partie de ses fonctionnalit\xe9s. Ces fonctionnalit\xe9s peuvent \xeatre acc\xe9d\xe9es de plusieurs mani\xe8res :"}),(0,s.jsxs)(c.uQ,{children:[(0,s.jsx)("li",{children:"En t\xe9l\xe9chargeant une biblioth\xe8que de fonctions pour l'inclure sur son site,"}),(0,s.jsx)("li",{children:"En r\xe9cup\xe9rant une donn\xe9e pr\xe9cise en construisant une URL,"}),(0,s.jsx)("li",{children:"En incluant directement la biblioth\xe8que en ligne."})]}),(0,s.jsx)("p",{children:"Concernant Google Maps, on est dans ce dernier cas, c'est \xe0 dire qu'on va directement inclure la biblioth\xe8que Google Maps dans notre JavaScript."}),(0,s.jsxs)("section",{children:[(0,s.jsx)(c.H3,{children:"Inclure Google Maps"}),(0,s.jsxs)("p",{children:["Pour inclure les fonctions Google Maps dans notre application, nous ajoutons une balise"," ",(0,s.jsx)(c.Cy,{children:"script"})," dans la partie ",(0,s.jsx)(c.Cy,{children:"head"})," de notre page :"]}),(0,s.jsx)(t.A,{children:'<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>'}),(0,s.jsx)(c.nz,{children:"L'API Google Maps est disponible sous plusieurs d\xe9clinaisons, que l'on peut choisir en ajoutant un param\xe8tre \xe0 cette URL. Parmi ces param\xe8tres on retrouve :"}),(0,s.jsxs)(c.uQ,{children:[(0,s.jsxs)("li",{children:["L'utilisation ou non du GPS : ",(0,s.jsx)(c.Cy,{children:"sensor"}),","]}),(0,s.jsxs)("li",{children:["La langue des textes affich\xe9s sur la carte : ",(0,s.jsx)(c.Cy,{children:"language"}),","]}),(0,s.jsxs)("li",{children:["Le pays : ",(0,s.jsx)(c.Cy,{children:"region"}),"."]})]}),(0,s.jsxs)("p",{children:["Dans le cadre de ce tutoriel nous allons simplement activer l'utilisation du GPS avec le param\xe8tre ",(0,s.jsx)(c.Cy,{children:"sensor"})," que l'on va passer \xe0 ",(0,s.jsx)(c.Cy,{children:"true"})," :"]}),(0,s.jsx)(t.A,{children:'<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>\n'}),(0,s.jsxs)("p",{children:["Concernant les autres param\xe8tres je vous invite \xe0 aller lire la"," ",(0,s.jsx)(c.A,{isExternal:!0,href:"https://developers.google.com/maps",children:"documentation officielle"}),"."]})]})]}),(0,s.jsxs)("section",{children:[(0,s.jsx)(c.H2,{children:"Cr\xe9ation de la structure de notre page"}),(0,s.jsxs)("p",{children:["Notre carte va venir se loger dans un simple div, auquel nous allons attribuer l'id",(0,s.jsx)(c.Cy,{children:"map_canvas"}),".",(0,s.jsx)(c.Cy,{children:'<div id="map_canvas"></div>'}),". Afin que la carte s'affiche en plein \xe9cran, et qu'elle le fasse correctement sur tous les navigateurs, nous allons ajouter les propri\xe9t\xe9s de style suivantes :"]}),(0,s.jsx)(t.A,{lang:"css",children:"html { height: 100% }\nbody { height: 100%; margin: 0px; padding: 0px }\n#map_canvas { width: 100%; height: 100% }"}),(0,s.jsxs)(l.A,{children:["C'est quoi ces histoires de ",(0,s.jsx)(c.Cy,{children:"height"})," et ",(0,s.jsx)(c.Cy,{children:"width"})," \xe0 ",(0,s.jsx)(c.Cy,{children:"100%"})," ?"]}),(0,s.jsxs)("p",{children:["Pour afficher la carte en plein \xe9cran avec des valeurs en pourcentages, les navigateurs les plus \xe2g\xe9s auront besoin que l'on d\xe9finisse \xe9galement en pourcentage la taille des \xe9l\xe9ments parents. On indique donc \xe9galement une ",(0,s.jsx)(c.Cy,{children:"height: 100%"})," pour la balise"," ",(0,s.jsx)(c.Cy,{children:"body"})," et pour la balise ",(0,s.jsx)(c.Cy,{children:"html"}),". Nous allons \xe9galement ajouter une balise ",(0,s.jsx)(c.Cy,{children:"meta"})," dans le ",(0,s.jsx)(c.Cy,{children:"head"})," de notre HTML afin que l'utilisateur ne puisse pas r\xe9duire ou agrandir la carte :"]}),(0,s.jsx)(t.A,{children:'<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />'}),(0,s.jsx)("p",{children:"Et voil\xe0 ! Nous avons maintenant une page HTML pr\xeate \xe0 accueillir une Google Map. Voici ce \xe0 quoi devrait ressembler votre code pour le moment :"}),(0,s.jsx)(t.A,{lang:"html",children:'<!DOCTYPE html>\n<html>\n<head>\n <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />\n <style type="text/css">\n html { height: 100% }\n body { height: 100%; margin: 0px; padding: 0px }\n #map_canvas { height: 100% ; width:100%;}\n </style>\n <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>\n</head>\n<body>\n <div id="map_canvas"></div>\n</body>\n</html>'}),(0,s.jsx)("p",{children:"Un rapide aper\xe7u dans le navigateur nous montre... qu'absolument rien ne s'affiche, et c'est tout \xe0 fait normal ! Un peu de patience, la magie va agir tr\xe8s bient\xf4t."})]}),(0,s.jsxs)("section",{children:[(0,s.jsx)(c.H2,{children:"Afficher la carte Google Maps"}),(0,s.jsxs)("p",{children:["Bien, il est temps de passer aux choses s\xe9rieuses ! Nous souhaitons afficher la carte une fois notre page html charg\xe9e. Pour cela nous allons ajouter l'attribut ",(0,s.jsx)(c.Cy,{children:"onload"})," \xe0 notre balise ",(0,s.jsx)(c.Cy,{children:"body"})," : ",(0,s.jsx)(c.Cy,{children:'<body onload="initialize()">'}),", puis cr\xe9er la fameuse fonction ",(0,s.jsx)(c.Cy,{children:"initialize()"})," dans un ",(0,s.jsx)(c.Cy,{children:"script"}),"."]}),(0,s.jsx)(t.A,{lang:"html",children:'<script type="text/javascript">\n function initialize() {\n\n }\n</script>'}),(0,s.jsx)(c.nz,{children:"Cette fonction va, comme son nom l'indique, initialiser la carte Google Maps. Dans le cadre de ce tutoriel, nous allons cr\xe9er une carte :"}),(0,s.jsxs)(c.uQ,{children:[(0,s.jsxs)("li",{children:["Contenue dans notre ",(0,s.jsx)(c.Cy,{children:"div"})," ",(0,s.jsx)(c.Cy,{children:"map_canvas"}),","]}),(0,s.jsx)("li",{children:"Centr\xe9e sur les coordonn\xe9es 48.858565, 2.347198 (Ch\xe2telet \xe0 Paris !),"}),(0,s.jsx)("li",{children:"De niveau de zoom 19 (tr\xe8s pr\xe9cis afin de pouvoir tester facilement les d\xe9placements un peu plus tard),"}),(0,s.jsxs)("li",{children:["En mode ",(0,s.jsx)(c.Cy,{children:"ROADMAP"})," c'est \xe0 dire un plan classique, sans image satellite ni relief."]})]}),(0,s.jsxs)("p",{children:["Ces param\xe8tres sont \xe0 fournir \xe0 l'instanciation de l'objet ",(0,s.jsx)(c.Cy,{children:"google.maps.Map"})," :"]}),(0,s.jsx)(t.A,{children:"function initialize() {\n map = new google.maps.Map(document.getElementById('map_canvas'), {\n zoom: 19,\n center: new google.maps.LatLng(48.858565, 2.347198),\n mapTypeId: google.maps.MapTypeId.ROADMAP,\n })\n}"}),(0,s.jsx)("p",{children:"Revenons un peu sur ce code..."}),(0,s.jsxs)("p",{children:["Tout d'abord, le premier param\xe8tre correspond \xe0 l'\xe9l\xe9ment du DOM dans lequel va \xeatre inject\xe9 notre carte (ici ",(0,s.jsx)(c.Cy,{children:"map_canvas"}),", que l'on r\xe9cup\xe8re gr\xe2ce \xe0"," ",(0,s.jsx)(c.Cy,{children:"document.getElementById()"}),"). Ensuite, le second param\xe8tre, les options, doivent \xeatre fournies sous cette forme : ",(0,s.jsx)(c.Cy,{children:"{nom: valeur, nom: valeur, ...}"}),"."]}),(0,s.jsxs)(c.nz,{children:["On remarque que les coordonn\xe9es du ",(0,s.jsx)(c.Cy,{children:"center"})," sont fournies au travers d'un nouvel objet : ",(0,s.jsx)(c.Cy,{children:"google.maps.LatLng"}),". Il en sera ainsi d\xe8s que l'on voudra d\xe9finir la latitude et longitude d'une coordonn\xe9e. Enfin ",(0,s.jsx)(c.Cy,{children:"mapTypeId"})," correspond au type de carte \xe0 afficher :"]}),(0,s.jsxs)(c.uQ,{children:[(0,s.jsxs)("li",{children:[(0,s.jsx)(c.Cy,{children:"ROADMAP"})," pour le plan,"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)(c.Cy,{children:"SATELLITE"})," pour les photos satellite,"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)(c.Cy,{children:"HYBRID"})," pour afficher les photos satellites avec le plan superpos\xe9,"]}),(0,s.jsxs)("li",{children:[(0,s.jsx)(c.Cy,{children:"TERRAIN"})," pour afficher les reliefs."]})]}),(0,s.jsx)("p",{children:"Allez, cette fois on peut ouvrir la page html dans son navigateur et... bingo ! Voil\xe0 un beau plan centr\xe9 sur Ch\xe2telet ! 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\xe9 la balise meta ils seront minuscules..."}),(0,s.jsx)(l.A,{children:"Bon c'est bien joli ton truc mais je ne vois pas o\xf9 est l'HTML5 l\xe0 dedans !"}),(0,s.jsx)("p",{children:"Patience on y arrive... Puisqu'on va maintenant utiliser la g\xe9olocalisation HTML5 !"})]}),(0,s.jsxs)("section",{children:[(0,s.jsx)(c.H2,{children:"Ajouter la g\xe9olocalisation HTML5"}),(0,s.jsxs)("p",{children:["Tout d'abord je pr\xe9cise \xe0 nouveau qu'il est n\xe9cessaire que vous maitrisiez la"," ",(0,s.jsx)(c.A,{href:p.Eq,children:"g\xe9olocalisation en HTML5"})," car ses principes ne seront pas r\xe9expliqu\xe9s dans ce tutoriel."]}),(0,s.jsxs)("p",{children:["Pour commencer, \xe0 la suite de la fonction ",(0,s.jsx)(c.Cy,{children:"initialize()"}),", nous testons la compatibilit\xe9 du navigateur avec la g\xe9olocalisation HTML :"]}
1),(0,s.jsx)(t.A,{children:"if (navigator.geolocation)\n var watchId = navigator.geolocation.watchPosition(successCallback, null, {\n enableHighAccuracy: true,\n })\nelse alert('Votre navigateur ne prend pas en compte la g\xe9olocalisation HTML5')"}),(0,s.jsxs)("p",{children:["Vous pouvez noter que je n'utilise pas d'",(0,s.jsx)(c.Cy,{children:"errorCallback"}),", ceci afin de ne pas alourdir le code et se concentrer sur l'essentiel. A chaque mise \xe0 jour de la position de l'utilisateur, la variable ",(0,s.jsx)(c.Cy,{children:"position"})," dans ",(0,s.jsx)(c.Cy,{children:"successCallback"})," est mise \xe0 jour. De plus, la m\xe9thode ",(0,s.jsx)(c.Cy,{children:"panTo()"})," permet de centrer la carte sur de nouvelles coordonn\xe9es. Par cons\xe9quent nous allons ajouter \xe0 notre ",(0,s.jsx)(c.Cy,{children:"successCallback"})," :"]}),(0,s.jsx)(t.A,{children:"map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude))"}),(0,s.jsx)("p",{children:"Et pour repr\xe9senter la position exacte, nous allons placer un marqueur sur la carte :"}),(0,s.jsx)(t.A,{children:"var marker = new google.maps.Marker({\n position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),\n map: map,\n})"}),(0,s.jsx)("p",{children:"Nous avons donc \xe0 pr\xe9sent :"}),(0,s.jsx)(t.A,{children:"function initialize() {\n map = new google.maps.Map(document.getElementById('map_canvas'), {\n zoom: 19,\n center: new google.maps.LatLng(48.858565, 2.347198),\n mapTypeId: google.maps.MapTypeId.ROADMAP,\n })\n}\n\nif (navigator.geolocation)\n var watchId = navigator.geolocation.watchPosition(successCallback, null, {\n enableHighAccuracy: true,\n })\nelse alert('Votre navigateur ne prend pas en compte la g\xe9olocalisation HTML5')\n\nfunction successCallback(position) {\n map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude))\n var marker = new google.maps.Marker({\n position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),\n map: map,\n })\n}"}),(0,s.jsx)("p",{children:"A chaque d\xe9placement effectu\xe9 par l'utilisateur, un nouveau marqueur est plac\xe9 sur la carte afin d'indiquer votre nouvel emplacement. Sympathique non ?"}),(0,s.jsx)("p",{children:"Notez cependant que si vous faites le test dans la rue avec votre smartphone, d\xe8s que le GPS perd le signal, votre position sera replac\xe9e au point relais auquel votre 3G est rattach\xe9e, ce qui est beaucoup moins pr\xe9cis."}),(0,s.jsx)("p",{children:"Et voil\xe0 ! A ce stade vous avez toutes les connaissances pour exploiter la g\xe9olocalisation 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\xe8s nombreuses fonctionnalit\xe9s propos\xe9es par l'API."})]}),(0,s.jsxs)("section",{children:[(0,s.jsx)(c.H2,{children:"Bonus : le trac\xe9 du parcours"}),(0,s.jsx)("p",{children:"Vous en voulez encore ? Parfait ! Nous allons ajouter \xe0 notre application la cerise sur le g\xe2teau qui \xe9patera vos proches ! (qui ont cependant 9 chances sur 10 de vous r\xe9pondre \"Ben qu'est-ce que \xe7a a de si formidable ? C'est l'application Google Maps quoi...\", mais ne perdez pas espoir !)."}),(0,s.jsxs)("p",{children:["Afin de parfaire notre application nous allons donc tracer une ligne qui va repr\xe9senter le chemin suivi par l'utilisateur. Pour ce faire, nous allons avoir recours \xe0 l'objet"," ",(0,s.jsx)(c.Cy,{children:"google.maps.Polyline"}),". Un ",(0,s.jsx)(c.Cy,{children:"Polyline"})," est une ligne trac\xe9e entre plusieurs points. Dans le cadre de cet exemple, \xe0 chaque nouvelle position de g\xe9olocalisation, nous allons tracer une ligne reliant la position pr\xe9c\xe9dente \xe0 la nouvelle. Un ",(0,s.jsx)(c.Cy,{children:"Polyline"})," se cr\xe9e de la mani\xe8re suivante :"]}),(0,s.jsx)(t.A,{children:"var newLine = new google.maps.Polyline({\n path: newLineCoordinates,\n strokeColor: '#FF0000',\n strokeOpacity: 1.0,\n strokeWeight: 2,\n})"}),(0,s.jsx)("p",{children:"Les 3 derniers param\xe8tres servent \xe0 d\xe9finir l'apparence du trac\xe9 (qui est rouge dans cet exemple), et le premier param\xe8tre est un tableau de coordonn\xe9es, c'est \xe0 dire :"}),(0,s.jsx)(t.A,{children:"var newLineCoordinates = [\n new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),\n new google.maps.LatLng(position.coords.latitude, position.coords.longitude),\n]"}),(0,s.jsxs)("p",{children:["Cette variable doit \xeatre cr\xe9\xe9e avant ",(0,s.jsx)(c.Cy,{children:"newLine"})," bien entendu. On remarque la variable ",(0,s.jsx)(c.Cy,{children:"previousPosition"})," qui n'est pas encore d\xe9finie. Nous allons le faire imm\xe9diatement en d\xe9clarant une variable globale tout en haut de notre script :"]}),(0,s.jsx)(t.A,{children:"var previousPosition = null"}),(0,s.jsxs)("p",{children:["Cette variable contiendra en permanence la position pr\xe9c\xe9dente afin d'effectuer le trac\xe9 du"," ",(0,s.jsx)(c.Cy,{children:"Polyline"}),". Une fois toutes ces informations fournies pour la cr\xe9ation du"," ",(0,s.jsx)(c.Cy,{children:"Polyline"}),", il suffit d'ajouter ce dernier \xe0 notre carte :"]}
1),(0,s.jsx)(t.A,{children:"newLine.setMap(map)"}),(0,s.jsx)("p",{children:"Enfin, on attribue la valeur courante de position \xe0 previousPosition :"}),(0,s.jsx)(t.A,{children:"previousPosition = position"}),(0,s.jsx)("p",{children:"Ce qui donne le code suivant :"}),(0,s.jsx)(t.A,{children:"var previousPosition = null\n\nfunction initialize() {\n map = new google.maps.Map(document.getElementById('map_canvas'), {\n zoom: 19,\n center: new google.maps.LatLng(48.858565, 2.347198),\n mapTypeId: google.maps.MapTypeId.ROADMAP,\n })\n}\n\nif (navigator.geolocation)\n var watchId = navigator.geolocation.watchPosition(successCallback, null, {\n enableHighAccuracy: true,\n })\nelse alert('Votre navigateur ne prend pas en compte la g\xe9olocalisation HTML5')\n\nfunction successCallback(position) {\n map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude))\n var marker = new google.maps.Marker({\n position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),\n map: map,\n })\n if (previousPosition) {\n var newLineCoordinates = [\n new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),\n new google.maps.LatLng(position.coords.latitude, position.coords.longitude),\n ]\n\n var newLine = new google.maps.Polyline({\n path: newLineCoordinates,\n strokeColor: '#FF0000',\n strokeOpacity: 1.0,\n strokeWeight: 2,\n })\n newLine.setMap(map)\n }\n previousPosition = position\n}"}),(0,s.jsxs)("p",{children:["On a \xe9galement ajout\xe9 une condition sur l'existence de la variable"," ",(0,s.jsx)(c.Cy,{children:"previousPosition"}),", afin de ne pas d\xe9clencher d'erreur lors de la premi\xe8re ex\xe9cution du code."]}),(0,s.jsxs)("p",{children:["Si vous testez ce code sur votre smartphone, vous remarquerez que chaque coupure du signal GPS provoque le trac\xe9 de lignes vers le point tr\xe8s \xe9loign\xe9 de votre anterre 3G la plus proche. Afin de pallier \xe0 ce d\xe9faut, nous pouvons faire appel \xe0 l'une des propri\xe9t\xe9s tr\xe8s int\xe9ressantes de l'objet ",(0,s.jsx)(c.Cy,{children:"position.coords"}),". Si vous avez bien suivi le pr\xe9c\xe9dent tutoriel vous devriez avoir devin\xe9 qu'il s'agit de la propri\xe9t\xe9 ",(0,s.jsx)(c.Cy,{children:"accuracy"})," !"]}),(0,s.jsxs)("p",{children:["Afin de ne jamais prendre en compte les coordonn\xe9es impr\xe9cises du Wifi et de la 3G sans GPS, il nous suffit donc d'ajouter un seuil de pr\xe9cision minimal en m\xe8tres qui va englober tout le contenu du ",(0,s.jsx)(c.Cy,{children:"successCallback"}),"."]}),(0,s.jsx)(t.A,{children:"function successCallback(position) {\n if (position.coords.accuracy < 100) {\n // Affichage du marqueur et du Polyline\n }\n}\n"})]}),(0,s.jsxs)("section",{children:[(0,s.jsx)(c.H2,{children:"Code
1complet de d\xe9monstration"}),(0,s.jsx)("p",{children:"Ce code affiche une carte utilisant l'API Google Maps ainsi que les donn\xe9es de g\xe9olocalisation afin de situer l'utilisateur gr\xe2ce au GPS de son t\xe9l\xe9phone. L'application affiche le trac\xe9 du parcours de l'utilisateur s'il se d\xe9place et place un marqueur \xe0 chaque nouvelles coordonn\xe9es re\xe7ues par le service de g\xe9olocalisation :"}),(0,s.jsx)(t.A,{lang:"html",children:'<!DOCTYPE html>\n<html>\n<head>\n <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />\n <style type="text/css">\n html { height: 100% }\n body { height: 100%; margin: 0px; padding: 0px }\n #map_canvas { height: 100% ; width:100%;}\n </style>\n <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> \n <script type="text/javascript">\n\n var previousPosition = null;\n \n function initialize() {\n map = new google.maps.Map(document.getElementById("map_canvas"), {\n zoom: 19,\n center: new google.maps.LatLng(48.858565, 2.347198),\n mapTypeId: google.maps.MapTypeId.ROADMAP\n }); \n }\n \n if (navigator.geolocation)\n var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true});\n else\n alert("Votre navigateur ne prend pas en compte la g\xe9olocalisation HTML5");\n \n function successCallback(position){\n map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));\n var marker = new google.maps.Marker({\n position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), \n map: map\n }); \n if (previousPosition){\n var newLineCoordinates = [\n new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),\n new google.maps.LatLng(position.coords.latitude, position.coords.longitude)];\n \n var newLine = new google.maps.Polyline({\n path: newLineCoordinates, \n strokeColor: "#FF0000",\n strokeOpacity: 1.0,\n strokeWeight: 2\n });\n newLine.setMap(map);\n }\n previousPosition = position;\n }; \n </script>\n</head>\n\n<body onload="initialize()">\n <div id="map_canvas"></div>\n</body>\n\n</html>'})]}),(0,s.jsxs)("footer",{children:[(0,s.jsx)("p",{children:"Et voil\xe0 c'est termin\xe9 ! J'esp\xe8re que ce tutoriel vous a plu, et qu'il a rendu un peu plus concr\xe8te l'utilisation de la g\xe9olocalisation en HTML5. C'est vrai qu'avoir des chiffres qui bougent c'est bien, mais une carte c'est mieux !"}),(0,s.jsx)("p",{children:"A tr\xe8s bient\xf4t pour de nouveaux tutoriels !"})]})]});g.wrappers=e=>(0,s.jsx)(a.A,{children:e});let m=g}},e=>{var n=n=>e(e.s=n);e.O(0,[8916,5422,6379,7351,8593,1940,4339,2503,3526,636,6593,8792],()=>n(11312)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.