cli1903 · cli1903 · Jun 16, 2020 · Jun 16, 2020 · Jun 17, 2020 · Jun 17, 2020
diff --git a/portfolio/src/main/webapp/maps.html b/portfolio/src/main/webapp/maps.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title> Map </title>
-  <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJ5nD1n3osPyQHjdY1bCE6i887N32UTLM&libraries=places"></script>
   <script src="script.js"></script>
   <link rel="stylesheet" href="style.css">
 </head>
@@ -17,7 +17,34 @@
   </div>
   <div id="content">
     <h1 class="title"> My Notable Locations </h1>
-    <div id="map"></div>
+    <div>
+      <select id="add-marker" name="add-marker" onchange="addMarker()">
+        <option value="false"> Regular mouse </option>
+        <option value="true"> Add your own marker </option>
+      </select>
+
+      <div id="directions-section">
+        <input id="origin-input" class="controls" type="text"
+            placeholder="Enter an origin location">
+
+        <input id="destination-input" class="controls" type="text"
+            placeholder="Enter a destination location">
+
+        <div id="mode-selector" class="controls">
+          <input type="radio" name="type" id="changemode-walking" checked="checked">
+          <label for="changemode-walking">Walking</label>
+
+          <input type="radio" name="type" id="changemode-transit">
+          <label for="changemode-transit">Transit</label>
+
+          <input type="radio" name="type" id="changemode-driving">
+          <label for="changemode-driving">Driving</label>
+        </div>
+      </div>
+
+      <div id="map"></div>
+      <div id="directions"></div>
+    </div>
   </div>
 </body>
 </html>
diff --git a/portfolio/src/main/webapp/script.js b/portfolio/src/main/webapp/script.js
@@ -54,7 +54,6 @@ function addRandomDestination() {
 
 async function setPage() {
   const loginResponse = await fetch('/login', {method: 'POST'});
-
   if (loginResponse.ok) {
     const loginJson = await loginResponse.json();
     addLogInOutButton(loginJson.url, loginJson.isLoggedIn);
@@ -180,25 +179,182 @@ function shouldHideElement(container, hide) {
   }
 }
 
+let map;
 function initMap() {
   const tokyo = {lat: 35.668, lng: 139.723};
   const hachi = {lat: 35.659107, lng: 139.700653};
-  const map = new google.maps.Map(document.getElementById('map'), {
-    center: tokyo,
-    zoom: 12
-  });
+  map = new google.maps.Map(
+      document.getElementById('map'), 
+      {center: tokyo, zoom: 12});
 
   const marker = new google.maps.Marker({position: hachi, map: map})
 
-  hachiString = '<div id="hachi-content"> <h1> Statue of Hachiko </h1>' + 
-    '<p> a very good boi </p>' + 
-    '<p> For actual info on Hachiko, visit his' + 
-    '<a href="https://en.wikipedia.org/wiki/Hachik%C5%8D"> Wikipedia page </a>' + 
-    '</p> </div>';
+  hachiString = '<div id="hachi-content"> <h1> Statue of Hachiko </h1>' +
+      '<p> a very good boi </p>' +
+      '<p> For actual info on Hachiko, visit his' +
+      '<a href="https://en.wikipedia.org/wiki/Hachik%C5%8D"> Wikipedia page </a>' +
+      '</p> </div>';
 
   var infowindow = new google.maps.InfoWindow({content: hachiString});
 
   marker.addListener('click', function() {
     infowindow.open(map, marker);
-  })
+  });
+
+  new AutocompleteDirectionsHandler(map);
+}
+
+function addMarker() {
+  const shouldAddMarker = document.getElementById('add-marker').value
+
+  if (shouldAddMarker === 'true') {
+    map.addListener('click', function(mapsMouseEvent) {
+      const newMarker =
+          new google.maps.Marker({position: mapsMouseEvent.latLng, map: map});
+    });
+  }
+  else {
+    google.maps.event.clearListeners(map, 'click');
+  }
+}
+
+// START OF DIRECTIONS CODE
+
+// This example requires the Places library. Include the libraries=places
+// parameter when you first load the API. For example:
+// <script
+// src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
+
+
+/**
+ * @constructor
+ */
+function AutocompleteDirectionsHandler(map) {
+  this.map = map;
+  this.originPlaceId = null;
+  this.destinationPlaceId = null;
+  this.travelMode = 'WALKING';
+  this.directionsService = new google.maps.DirectionsService;
+  this.directionsRenderer = new google.maps.DirectionsRenderer;
+  this.directionsRenderer.setMap(map);
+
+  var originInput = document.getElementById('origin-input');
+  var destinationInput = document.getElementById('destination-input');
+  var modeSelector = document.getElementById('mode-selector');
+  var directionsSteps = document.getElementById('directions');
+
+  this.directionsRenderer.setPanel(directionsSteps);
+
+  var originAutocomplete = new google.maps.places.Autocomplete(originInput);
+  // Specify just the place data fields that you need.
+  originAutocomplete.setFields(['place_id']);
+
+  var destinationAutocomplete =
+      new google.maps.places.Autocomplete(destinationInput);
+  // Specify just the place data fields that you need.
+  destinationAutocomplete.setFields(['place_id']);
+
+  this.setupClickListener('changemode-walking', 'WALKING');
+  this.setupClickListener('changemode-transit', 'TRANSIT');
+  this.setupClickListener('changemode-driving', 'DRIVING');
+
+  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
+  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
+
+  this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(modeSelector);
+  this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
+      destinationInput);
+  this.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(originInput);
+
+}
+
+// Sets a listener on a radio button to change the filter type on Places
+// Autocomplete.
+AutocompleteDirectionsHandler.prototype.setupClickListener = function(
+    id, mode) {
+  var radioButton = document.getElementById(id);
+  var me = this;
+
+  radioButton.addEventListener('click', function() {
+    me.travelMode = mode;
+    me.route();
+  });
+};
+
+AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(
+    autocomplete, mode) {
+  var me = this;
+  autocomplete.bindTo('bounds', this.map);
+
+  autocomplete.addListener('place_changed', function() {
+    var place = autocomplete.getPlace();
+
+    if (!place.place_id) {
+      let placeText;
+
+      if (mode == 'ORIG') {
+        placeText = document.getElementById('origin-input').value;
+      } else {
+        placeText = document.getElementById('destination-input').value;
+      }
+
+      service = new google.maps.places.PlacesService(me.map);
+
+      var request = {
+        query: placeText,
+        fields: ['place_id'],
+      };
+
+      var placeId;
+
+      service.findPlaceFromQuery(request, function(results, status) {
+        if (status === google.maps.places.PlacesServiceStatus.OK) {
+          if (mode === 'ORIG') {
+            me.originPlaceId = results[0].place_id;
+          } else {
+            me.destinationPlaceId = results[0].place_id;
+          }
+        }
+
+        me.route();
+      });
+      return;
+    }
+
+    if (mode === 'ORIG') {
+      me.originPlaceId = place.place_id;
+    } else {
+      me.destinationPlaceId = place.place_id;
+    }
+    me.route();
+
+  });
+};
+
+AutocompleteDirectionsHandler.prototype.route = function() {
+  var me = this;
+
+  if (!this.originPlaceId) {
+    return;
+  }
+
+  if (!this.destinationPlaceId) {
+    return;
+  }
+
+  this.directionsService.route(
+    {
+      origin: {'placeId': this.originPlaceId},
+      destination: {'placeId': this.destinationPlaceId},
+      travelMode: this.travelMode
+    },
+    function(response, status) {
+      if (status === 'OK') {
+        me.directionsRenderer.setDirections(response);
+      } else {
+        window.alert('Directions request failed due to ' + status);
+      }
+    }
+  );
+
 }
diff --git a/portfolio/src/main/webapp/style.css b/portfolio/src/main/webapp/style.css
@@ -57,6 +57,7 @@ body {
   width: 100%;
   position: fixed;
   top: 0;
+  z-index: 1;
 }
 
 .nav a {
@@ -204,7 +205,24 @@ textarea {
 
 #map {
   border: thin solid black;
-  height: 500px;
-  width: 500px;
+  height: 1000px;
+  width: 1000px;
   margin: 20px;
 }
+
+#directions-section {
+  display: none;
+}
+
+.controls {
+  margin-top: 10px;
+  margin-right: 5px;
+  height: 32px;
+}
+
+#mode-selector {
+  background-color: #4d90fe;
+  padding: 8px 5px 0px;
+  font-size: 14px;
+  color: white;
+}