JSFiddle - React, Tailwind, and code Playground

by Jean-Baptiste Audras

HTML

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<h1>Test géolocalisation</h1>
<button onclick="stopGeolocalisation();">Arrêter la géolocalisation</button>
<div id="googleMap"></div>

CSS

html, body{
                                        height: 100%;
                                        width: 100%;
                                        margin: 0px;
                                        padding: 0px;
                        }
                       
                        #googleMap {
                                        width: 100%;
                                        height: 100%;
                        }
                       
                        button {
                                position: fixed;
                                top: 10px;
                                left: 10px;
                                z-index:10;
                        }

JavaScript

var googleMap;
                var oldLat = null;
                var oldLng = null;
               
                $(function() {
                        if(navigator.geolocation) {
                                //initialise la map
                                googleMap = new google.maps.Map($("#googleMap").get(0), {
                                        zoom: 17,
                                        center: new google.maps.LatLng(48.9021450, 2.46992090),
                                        mapTypeId: google.maps.MapTypeId.ROADMAP
                                });
                               
                                startLocalisation();   
                        } else {
                                $('h1').after('<br /><p>Votre navigateur ne supporte pas la géolocalisation HTML5</p>');
                        }
                });
               
                function startLocalisation() {
                        //active le GPS
                        var userPosition = navigator.geolocation.watchPosition(callbackSuccess, callbackError, {enableHighAccuracy: true});
                }
               
                function callbackSuccess(position) {
                        //récupère la latitude et la longitude
                        var latitude = position.coords.latitude;
                        var longitude = position.coords.longitude;
                       
                        //trace un marqueur
                        var marker = new google.maps.Marker({
                                position: new google.maps.LatLng(latitude, longitude),
                                map: googleMap
                        });
                       
                        //centre la map aux coordonnées voulue
                                googleMap.panTo(new google.maps.LatLng(latitude, longitude));
                       
                        //trace une ligne entre lancienne position et la nouvelle
                ...