GPS Tracker en temps réel sur juste HTML / JS et Google Maps pour être exécuté sur un téléphone à main? Est-il possible?

Oui, c'est possible. La plupart des navigateurs des derniers smartphones ont mis en œuvre le API de géolocalisation W3C:

L'API de géolocalisation définit une interface de haut niveau vers des informations de localisation associées uniquement au périphérique hébergeant la mise en œuvre, telles que la latitude et la longitude. L'API elle-même est agnostique des sources d'information de localisation sous-jacentes. Les sources communes d'information sur la localisation comprennent le système mondial de localisation (GPS) et la localisation déduite à partir de signaux réseau tels que l'adresse IP, RFID, WiFi et Bluetooth MAC adresses, et GSM/CDMA IDS de la cellule, ainsi que l'entrée de l'utilisateur. Aucune garantie n'est donnée que l'API renvoie l'appareil de l'emplacement réel.

L'API est conçue pour activer à la fois les requêtes de position" one-shot " et les mises à jour de position répétées, ainsi que la possibilité d'interroger explicitement les positions cachées.

L'utilisation de L'API de géolocalisation pour tracer un point sur Google Maps, ressemblera à quelque chose comme ceci:

if (navigator.geolocation) { 
  navigator.geolocation.getCurrentPosition(function(position) {  

    var point = new google.maps.LatLng(position.coords.latitude, 
                                       position.coords.longitude);

    // Initialize the Google Maps API v3
    var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 15,
      center: point,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Place a marker
    new google.maps.Marker({
      position: point,
      map: map
    });
  }); 
} 
else {
  alert('W3C Geolocation API is not available');
} 

ce qui précède ne rassemblera la position qu'une seule fois, et ne mettra pas automatiquement à jour lorsque vous commencerez à bouger. Pour gérer cela, vous devez garder une référence à votre marqueur, appeler périodiquement le getCurrentPosition() méthode, et déplacer le marqueur vers les nouvelles coordonnées. Le code pourrait ressembler à quelque chose comme ceci:

// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = null;

function autoUpdate() {
  navigator.geolocation.getCurrentPosition(function(position) {  
    var newPoint = new google.maps.LatLng(position.coords.latitude, 
                                          position.coords.longitude);

    if (marker) {
      // Marker already created - Move it
      marker.setPosition(newPoint);
    }
    else {
      // Marker does not exist - Create it
      marker = new google.maps.Marker({
        position: newPoint,
        map: map
      });
    }

    // Center the map on the new position
    map.setCenter(newPoint);
  }); 

  // Call the autoUpdate() function every 5 seconds
  setTimeout(autoUpdate, 5000);
}

autoUpdate();

maintenant si en vous traçant vous voulez dire que vous devriez aussi stocker ces informations sur un serveur (de sorte que quelqu'un d'autre puisse vous voir vous déplacer à partir d'un endroit distant), ensuite, vous devez envoyer les points à un script côté serveur en utilisant AJAX.

En outre, assurez-vous que le conditions D'utilisation de L'API GoogleMaps autoriser cet usage, avant de vous engager dans un tel projet.

mise à jour: l'API de géolocalisation W3C expose un watchPosition() méthode qui peut être utilisée à la place de l' setTimeout() mécanisme que nous avons utilisé dans l'exemple ci-dessus.