landing.ejs
4.34 KB
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
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<% include ../partials/header %>
</head>
<body>
<div class="container">
<!-- My LOCATION -->
<div>
<input type="text" class="form-control text-field" id="from" name="fromText" placeholder="MY LOCATION">
</div>
<!-- Destination -->
<div>
<input type="text" class="form-control text-field" id="to" name="toText" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...">
</div>
<!-- Buttons and status information on top of the map. -->
<div class="container" id="map-top">
<div class="row">
<!-- Status -->
<div class="col-xs-6">
<!-- Title: Current Route -->
<div>
Current Route:
</div>
<!-- Icons + Status -->
<div class="row status">
<!-- Safety Rating -->
<div class="col-xs-6">
80% Safe
</div>
<!-- Travel Duration -->
<div class="col-xs-6">
10 Mins
</div>
</div>
</div>
<!-- Alt Routes -->
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-block" id="alt-routes" onclick="todo()">Alternate Routes</button>
</div>
</div>
</div>
<!-- Div container for map. -->
<div id="map"></div>
<!-- Javascript for the map. -->
<script>
function initMap() {
// Used by the Google Maps Direction API.
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
// Setting default map location.
var map = document.getElementById("map");
var options = {
center: new google.maps.LatLng(32.8804526, -117.2376329),
zoom: 17
}
map = new google.maps.Map(map, options);
directionsDisplay.setMap(map);
// Keeping the map center when the browser is resized.
function resizing() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
}
google.maps.event.addDomListener(window, "resize", resizing);
// Showing route.
displayRoute(directionsService, directionsDisplay);
}
function displayRoute(directionsService, directionsDisplay) {
// Textfields that show from and to.
document.getElementsByName("fromText")[0].placeholder=localStorage.getItem("from");
document.getElementsByName("toText")[0].placeholder=localStorage.getItem("to");
var request = {
origin: localStorage.getItem("from"),
destination: localStorage.getItem("to"),
travelMode: localStorage.getItem("mode")
};
directionsService.route(request, function(response, status) {
if (status === "OK") {
directionsDisplay.setDirections(response);
}
else {
window.alert("Directions request failed due to " + status);
}
});
}
</script>
<!-- Calling google maps API using the function defined above. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAXDHeZXEv4H4ZnThVDxpyAuxVpzOcj_U&callback=initMap">
</script>
<!-- Buttons at the bottom of the map -->
<div class="container">
<div class="row">
<!-- Status -->
<div class="col-xs-4">
<!-- Title: Current Area -->
<div>
Current Area:
</div>
<!-- Icons + Status -->
<div>
80% Safe
</div>
</div>
<!-- Emergency -->
<div class="col-xs-4">
<button type="button" class="btn btn-danger btn-block" onclick="todo()">Emergency</button>
</div>
<!-- Open Map -->
<div class="col-xs-4">
<button type="button" class="btn btn-default btn-block" onclick="todo()">Open in Map</button>
</div>
</div>
</div>
</div>
<script>
function todo() {
alert("This button is brought to you by the wonderful Wizard of Oz.");
}
</script>
</body>
</html>