smartm13.github.io/walkerv2.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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Distance Calc</title>
<p>Distance=<span id="dist">Not calculated</span></p>
<!--div id="dvMapx" xstyle="width: 500px; height: 500px">
</div-->
<img id="a2b" src="" alt="not yet" style="visibility:hidden">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCukgTXgyKU6AhORZnj4tagO3DNOwgB8Kg"></script>
<!-- get ur key @ https://developers.google.com/maps/documentation/javascript/directions -->
<body onload="init()">
<table><tr>
<td><button onclick="geoFindMe('stLoc');started();"><h1>Start</h1></button> <span id="stLoc">Not detected</span></td>
<td><button onclick="geoFindMe('enLoc');stoped();asResult();"><h1>Stop</h1></button> <span id="enLoc">Not detected</span></td>
</tr></table>
<!--
<div id="dvPanel" style="width: 500px; height: 500px"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
-->
</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="";
	var d=new Date();
	output.innerHTML+='<br>Time:'+d.toLocaleString()+'<div style="visibility:hidden" id="'+elem+'time">'+d.getTime()+'</div>';
    output.innerHTML+= 'Latitude is <span id="'+elem+'Clt">' + latitude + '</span>° <br>Longitude is <span id="'+elem+'Clg">' + longitude + '</span>°<br>';
	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=15&size=200x200&sensor=false&key=AIzaSyD205DXBtttTWi2NIAM8pAWwMH98g8awvo";
	img.alt="^see on maps."
    output.appendChild(img);
  }

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

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

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

function init(){
console.log("checking location permissions");
//geoFindMe();
}
function started(){
document.getElementById("dist").innerHTML="Not calculated";
	document.getElementById('a2b').src="";
}
function stoped(){
document.getElementById("dist").innerHTML="Working on it.";
}
function asResult()
{
if (document.getElementById("enLocClt")!=null && document.getElementById("stLocClt")!=null)
result();
else setTimeout(asResult,1000);
}

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 +" ("+response.routes[0].legs[0].distance.value +" meters)"); // the distance in metres
	secs=(document.getElementById("enLoctime").innerHTML-document.getElementById("stLoctime").innerHTML)/1000;
	var date = new Date(1970,0,1);
    date.setSeconds(secs);
    Tsecs= date.toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
	document.getElementById("dist").innerHTML+="<br>Time Taken= "+Tsecs+" [hh:mm:ss]";
	document.getElementById("dist").innerHTML+="<br>Excepted time= "+response.routes[0].legs[0].duration.text;
	speed=(response.routes[0].legs[0].distance.value/(5*secs/18)).toFixed(2);
	document.getElementById("dist").innerHTML+="<br>Estimated Speed="+speed+" kmph.";
	if (speed<5)document.getElementById("dist").innerHTML+=" Too Slow. x(";
	//static map show
	document.getElementById("a2b").src="https://maps.googleapis.com/maps/api/staticmap?size=500x500&key=AIzaSyD205DXBtttTWi2NIAM8pAWwMH98g8awvo&path=enc%3A"+response.routes[0].overview_polyline;
	document.getElementById("a2b").style="";
	/*
	//map showing
	directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': false });
    var mumbai = new google.maps.LatLng(18.9750, 72.8258);
    var mapOptions = {
        zoom: 7,
        center: mumbai
    };
    map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('dvPanel'));
	//main
	directionsDisplay.setDirections(response);
	*/
  }
  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>