-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfindRoute.html
131 lines (110 loc) · 3.89 KB
/
findRoute.html
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
130
131
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 50%;
height: 200px;
background-color: grey;
}
</style>
</head>
<body>
<p>Source:</p>
<input id="src" placeholder="a city, full address, landmark etc.">
<p>Destination:</p>
<input id="dest" placeholder="a city, full address, landmark etc.">
<p> Avoid Tolls <input type="radio" onclick="myFunction()" id="toll"></p> <br>
<button type="button" onclick="myFunction()">Submit</button>
<br>
<div id="output"></div>
<br>
<div id="printMin"></div>
<br>
<p>Please enter speed to calculate ETA </p>
<input id="speed">
<button type="button" onclick="myFunction()">Check ETA</button>
<br>
<div id="printETA"> </div>
<br>
<br>
<div id="map"></div>
<script>
//dummy map
function iniM() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
function myFunction() {
var source, destination, speed,tolls;
// Get the value of input fields
source = document.getElementById("src").value;
destination = document.getElementById("dest").value;
speed = document.getElementById("speed").value;
tolls = document.getElementById("toll").checked;
initMap(source, destination, speed, tolls);
}
function initMap(source,destination,speed,tolls) {
// calling Maps API's direction service to return multiple routes
var directionsService = new google.maps.DirectionsService();
// adding traffic layer to account for traffic delays.
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
//constructing the request object.
var request = {
origin : source, // a city, full address, landmark etc
destination : destination,
travelMode : google.maps.DirectionsTravelMode.DRIVING,
provideRouteAlternatives: true,
};
//retrieving details of routes from the JSON output returned.
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK ) {
var dist=[], time=[];
for(i=0;i<response.routes.length;i++) {
dist.push(response.routes[i].legs[0].distance.value);
time.push((response.routes[i].legs[0].duration.value/60));
}
if (typeof speed === 'undefined' || !speed) {
print_distance_time(dist,time,speed);
} else {
find_min_val(dist,time,speed);
}
} else {
alert("Please check the locations correctly");
}
});
}
function print_distance_time(dist,time,speed){
for(j=0;j<dist.length;j++){
document.getElementById('output').innerHTML += "Distance for route " + j + " is " + dist[j] +"Time for route " + j + " is " +time[j] + " mins <br/>";
}
find_min_val(dist,time,speed)
}
// find the minimum distance and speed.
function find_min_val(dist,time,speed) {
var min_dist = Math.min.apply(null,dist);
var min_time = Math.min.apply(null,time);
if (speed.length !== 0) {
var time_remaining = min_dist/speed;
etaCalculated = "ETA for the specified speed is " + time_remaining + " mins";
document.getElementById('printETA').innerHTML = etaCalculated;
}
else print_min_values(min_dist,min_time);
}
function print_min_values(min_dist,min_time) {
p = "Min distance is to the destination is "+ min_dist +" Minimum Time take to reach destination is "+min_time;
document.getElementById('printMin').innerHTML = p;
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAqTOnz6p3kw9JNpaXAKcsKrViV1J9nGgM&callback=iniM"
type="text/javascript"></script>
</body>
</html>