smartm13.github.io/walker.html at master · smartm13/smartm13.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<html>
<title>
Distance Calc</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCukgTXgyKU6AhORZnj4tagO3DNOwgB8Kg"></script>
<body onload="init()">
<p>Distance=<span id="dist">Not calculated</span></p>
<button onclick="geoFindMe('stLoc');">Start</button> <span id="stLoc">Not detected</span><br><br>
<button onclick="geoFindMe('enLoc');asResult()">Stop</button> <span id="enLoc">Not detected</span>
</body>
<script>
function geoFindMe(elem) {
  var output = document.getElementById(elem);

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is <span id="'+elem+'Clt">' + latitude + '</span>° <br>Longitude is <span id="'+elem+'Clg">' + longitude + '</span>°</p>';
	output.innerHTML+="<a href='http://maps.google.com?q="+latitude+","+longitude+"'>Show on gMAPS</a><br>";
    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  }

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  }

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}


function httpGet(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous
    xmlHttp.send(null);
}


function init(){
console.log("checking location permissions");
//geoFindMe();
}


function started(){
alert("starting");
document.getElementById("dist").innerHTML="Not calculated";
//init();
}
function stoped(){
document.getElementById("dist").innerHTML="0";
alert("stoping");
//init();
result();
}
function asResult()
{
if (document.getElementById("enLocClt")==null)
{setTimeout(asResult,1000);}
else result();
}
function result(){
stt=document.getElementById("stLocClt").innerHTML+','+document.getElementById("stLocClg").innerHTML;
//stt="23.038835,72.549845";
enn=document.getElementById("enLocClt").innerHTML+','+document.getElementById("enLocClg").innerHTML;
/*KK="http://skip:8081/";
//KK="";
httpGet(KK+"calculate.html?start="+stt+"&end="+enn,function(resp){
document.getElementById("dist").innerHTML=resp;*/

var directionsService = new google.maps.DirectionsService();

var request = {
  origin      : stt, // a city, full address, landmark etc
  destination : enn,
  travelMode  : google.maps.DirectionsTravelMode.WALKING
};

directionsService.route(request, function(response, status) {
  if ( status == google.maps.DirectionsStatus.OK ) {
	console.log(response);
	console.log(status);
    document.getElementById("dist").innerHTML=( response.routes[0].legs[0].distance.text ); // the distance in metres
  }
  else {
    // oops, there's no route between these two locations
    // every time this happens, a kitten dies
    // so please, ensure your address is formatted properly
  }
});

}

</script>
</html>