From bf141f92f479d3c5114ff1c8932f86f435a6b603 Mon Sep 17 00:00:00 2001
From: Sing Chung Xiao <CSXiao64@gmail.com>
Date: Thu, 3 Nov 2016 09:18:52 -0700
Subject: [PATCH] "Forgot to commit changes to gitlab, google map working."
---
public/stylesheets/main.css | 2 ++
views/pages/index.ejs | 39 +++++++++++++++++++--------
views/pages/landing.ejs | 66 ++++++++++++++++++++++++++++++++++++++++-----
views/partials/header.ejs | 4 +--
4 files changed, 91 insertions(+), 20 deletions(-)
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
index bbcace6..fcad9ec 100644
--- a/public/stylesheets/main.css
+++ b/public/stylesheets/main.css
@@ -3,7 +3,9 @@
}
#map {
+ height: 600px;
margin-bottom: 10px;
+ width: 100%;
}
#map-top {
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
index 058a363..196a42b 100644
--- a/views/pages/index.ejs
+++ b/views/pages/index.ejs
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <!-- <% include ../partials/header %> -->
+ <% include ../partials/header %>
</head>
<!-- Homepage -->
@@ -19,41 +19,58 @@
<!-- First text field and label above the text field for current location -->
<div class="form-group text-center">
<label for="currentLocation">From</label>
- <input type="currentLocation" class="form-control" placeholder="Enter Current Location">
+ <input type="currentLocation" class="form-control" id="origin" placeholder="Enter Current Location" onchange="saveFrom()">
</div>
-
<!-- Second text field and label above the text field for destination -->
<div class="form-group text-center">
<label for="destination">To</label>
- <input type="destination" class="form-control" placeholder="Enter Destination">
+ <input type="destination" class="form-control" id="dest" placeholder="Enter Destination" onchange="saveTo()">
</div>
-
<!-- First travel option button, walking
This contains a row that holds buttons of type button. Buttons are highlighted upon selection.
-->
<div class="row">
- <button type="button" class="btn-default img-thumbnail col-xs-4">
+ <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="walk();">
<img class="img-responsive" src="images/pedestrian-walking.svg" alt="Walking Option" width="40" height="40">
</button>
<!-- Second travel button, driving -->
- <button type="button" class="btn-default img-thumbnail col-xs-4">
+ <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="drive();">
<img class="img-responsive" src="images/car-compact.svg" alt="Walking Option" width="40" height="40">
</button>
<!-- Third travel button, bus -->
- <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="javascript:autofill();">
+ <button type="button" class="btn-default img-thumbnail col-xs-4" onclick="bus();">
<img class="img-responsive" src="images/bus.svg" alt="Walking Option" width="40" height="40">
</button>
</div>
+
<div class="text-center">
<button type="submit" class="btn btn-primary btn-space">Go</button>
-
</div>
-
</form>
-
</div>
+ <!-- Google Map functionality. -->
+ <script>
+ function saveFrom() {
+ var fromInput = document.getElementById("origin").value;
+ localStorage.setItem("from", fromInput);
+ }
+ function saveTo() {
+ var toInput = document.getElementById("dest").value;
+ localStorage.setItem("to", toInput);
+ }
+ function walk() {
+ localStorage.setItem("mode", "WALKING");
+ }
+ function drive() {
+ localStorage.setItem("mode", "DRIVING");
+ }
+ function bus() {
+ localStorage.setItem("mode", "TRANSIT");
+ }
+ </script>
+
</body>
</html>
\ No newline at end of file
diff --git a/views/pages/landing.ejs b/views/pages/landing.ejs
index c5cf0bc..8b90a04 100644
--- a/views/pages/landing.ejs
+++ b/views/pages/landing.ejs
@@ -10,11 +10,11 @@
<!-- My LOCATION -->
<div>
- <input type="text" class="form-control text-field" placeholder="MY LOCATION">
+ <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" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...">
+ <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. -->
@@ -45,11 +45,63 @@
</div>
</div>
- <!-- Google Maps -->
- <div class="container" id="map">
- <!-- Placeholder -->
- <img class="img-responsive" src="images/temp.png" alt="temp" width="800" height="600">
- </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">
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 20045ff..11bc1c4 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -7,8 +7,8 @@
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
- <!-- JQuery
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
+ <!-- JQuery -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
--
1.9.1