html5 geolocation current position on clicks then subtract two points

Question

I want to code a page where i can click a button it gives the current position then another and get new potion and then tell me how far i have walked. I don't need to calculate the curve the earth or anything i am not walking that far LOL. I also don't want to have it constantly going and updating the geolocation. here is what i have, where did i go wrong? it keeps reading NaN... I am self taught so i may have some knowledge gaps..LOL thx in advance for the help

<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">start</button>
<BR><br><br>
<button onclick="getLocation2()">stop</button>
<button onclick="tods()">total</button>
<BR><br><br>
<p id="demo">something1</p>
<BR>
<p id="demo2">something2</p>

<script>
       var x = document.getElementById("demo");

         function getLocation() {
          if (navigator.geolocation) {
               navigator.geolocation.getCurrentPosition(showPosition);
             } else { 
       x.innerHTML = "Geolocation is not supported by this browser.";
          }
           }

         function showPosition(position) {
            x.innerHTML = "Latitude: " + position.coords.latitude + 
        "<br>Longitude: " + position.coords.longitude;  
         }

       var y = document.getElementById("demo2");

    function getLocation2() {
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition2);
} else { 
    y.innerHTML = "Geolocation is not supported by this browser.";
}
}

 function showPosition2(position2) {
y.innerHTML = "Latitude: " + position2.coords.latitude + 
"<br>Longitude: " + position2.coords.longitude; 
}
 </script>
 <script>
     function tods() {
     var z = x.innerHTML - y.innerHTML;
      document.getElementById("total").innerHTML = z;
    }
      </script>
  <p id="total">something 3</p>
      </body>
        </html>

I would think this has to do with the .innerHTML not returning a numeric value. I believe it returns a string? — OscuroAA, Dec 01 '15 at 00:34

score 0 · Answer 1 · edited May 23 '17 at 10:27

I believe the reason this is not working is because .innerHTML doesn't return a numeric value.

I would suggest parsing the returned value (a string, I believe) to an appropriate numeric value before trying to calculate the difference.

Additionally your calculation for getting the distance between the two points appears incorrect...

This question seems similar in nature. You could refer to the script in the approved answer to calculate the total.

You would then pass in your numeric values to that, or a similar function.

If you really don't want to factor in earth's radius, etc, you may want to look up the formula for calculating distance between two points on a graph, and implement your distance calculation in a similar fashion.

Maksym Kozlenko · Answer 2 · 2015-12-01T01:02:31.327

Been doing that for some of my projects, so following code samples are working. Following code calls passed func parameter with geolocation information when updated:

var setLocationUpdates = function(func) {
    var onUpdate = function(position)
    {
        if(!position)
            func(null);
        else
        {
            var lat = parseFloat((position.coords) ? new String(position.coords.latitude) : position.x);
            var lng = parseFloat((position.coords) ? new String(position.coords.longitude) : position.y);

            func({
                loc: [lat, lng],
                accuracy: position.coords.accuracy,
                altitude: position.coords.altitude,
                speed: position.coords.speed,
                altitudeAccuracy: position.coords.altitudeAccuracy,
                heading: position.coords.heading,
                date: new Date()
            });
        }
    };

    if(navigator.geolocation)
        navigator.geolocation.watchPosition( 
            onUpdate,
            function(error) { },
            {
            maximumAge: 10000,
            timeout: 5000,
            enableHighAccuracy: true
        });
};

To calculate distance in kilometers use following:

var distance = function(point)
        {
            var toRad = function(value) { return value * Math.PI / 180; };

            if(!(point instanceof mod.LatLng))
                throw "GeospatialJS.LatLng object expected";

            var R = 6371; // km
            var dLat = toRad((point.lat()-this.lat()));
            var dLon = toRad((point.lng()-this.lng()));
            var lat1 = toRad(this.lat());
            var lat2 = toRad(point.lat());

            var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                    Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2); 
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
            var d = R * c;
            return d;
        };

Source code

thank you I will look into modifying and not use the inner.html but I do not want to use the watch position .......I was thinking of using the local storage or something to hold the map points data then call and get the difference so I can see how far i have walked. but i do not want to have it running the entire time as with watch position.------thank you for the response though — pablo, Dec 03 '15 at 20:21

html5 geolocation current position on clicks then subtract two points

2 Answers2