<!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>