<!DOCTYPE html>
<html>
  <head>
    <title>Ubicación y distancia recorrida</title>
  </head>
  <body>
    <h1>Ubicación y distancia recorrida</h1>
    <p>Tu ubicación actual: <span id="location"></span></p>
    <p>Distancia recorrida: <span id="distance"></span></p>
    <p>Contador: <span id="contador"></span></p>
 
    <!-- Incluye la API de Google Maps -->
    <script src="https://maps.googleapis.com/maps/api/js?key=TU_API&libraries=geometry"></script>
 
    <script>
      // Inicializa la ubicación y la distancia recorrida
      var currentLocation = 0;
      var totalDistance = 0;
      var contadorVerificacion = 0;
      var previousLocation = 0;
 
      setInterval(() => {
        // Usa la API de geolocalización de JavaScript para obtener la ubicación actual
        navigator.geolocation.getCurrentPosition(function(position) {
          // Almacena la ubicación actual
          currentLocation = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
 
          // Muestra la ubicación actual en el elemento con el ID "location"
          document.getElementById("location").innerHTML =
            "Latitud: " + currentLocation.lat + ", Longitud: " + currentLocation.lng;
 
          // Si es la primera vez que se obtiene la ubicación, no se calcula la distancia
          if (previousLocation != 0) {
            // Calcula la distancia entre la ubicación actual y la anterior usando la función de distancia de Google Maps
            var distance = google.maps.geometry.spherical.computeDistanceBetween(
              new google.maps.LatLng(currentLocation.lat, currentLocation.lng),
              new google.maps.LatLng(previousLocation.lat, previousLocation.lng)
            );
 
            // Añade la distancia al total
            totalDistance += distance;
          }
 
          // Muestra la distancia recorrida en el elemento con el ID "distance"
          document.getElementById("distance").innerHTML = totalDistance + " metros";
          console.log(totalDistance);
 
          // Almacena la ubicación actual como la ubicación anterior para el próximo cálculo de distancia
          previousLocation = currentLocation;
          contadorVerificacion = contadorVerificacion+1;
          document.getElementById("contador").innerHTML = contadorVerificacion + "X";
        });
      }, 15000);
    </script>
  </body>
</html>