e

author: RossTheRoss <mstrapp@protonmail.com> 2021-02-25 10:15:00 -0600
committer: RossTheRoss <mstrapp@protonmail.com> 2021-02-25 10:15:00 -0600
commit: 510f8d68c91414cea5f6e8fd360616f857df1db9 (patch)
tree: e8834d1d85ec351292141458c6ed8b762107c2cd /csci4131/hw3
parent: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa... (diff)
download: homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar
homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar.gz
homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar.bz2
homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar.lz
homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar.xz
homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar.zst
homework-510f8d68c91414cea5f6e8fd360616f857df1db9.zip
4 files changed, 96 insertions, 22 deletions
diff --git a/csci4131/hw3/MyForm.html b/csci4131/hw3/MyForm.html
index 261d8df..4e2760d 100644
--- a/csci4131/hw3/MyForm.html
+++ b/csci4131/hw3/MyForm.html
@@ -5,6 +5,7 @@
     <meta charset="utf-8">
     <title>There is no form</title>
     <link rel="stylesheet" href="style.css">
+    <script src="contacts.js" defer></script>
 </head>
 <body>
     <nav>
@@ -47,4 +48,8 @@
             <input type="reset" value="Clear">
         </p>
     </form>
+    <div id="formap"></div>
+    <script
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHA_O_rW2n6AAb9lvwOQ3wO36rtstdc90&libraries=places,geometry&callback=initForm"
+        async defer></script>
 </body>
diff --git a/csci4131/hw3/contacts.js b/csci4131/hw3/contacts.js
index 68d5731..8518ef6 100644
--- a/csci4131/hw3/contacts.js
+++ b/csci4131/hw3/contacts.js
@@ -1,5 +1,3 @@
-document.getElementById("bigboi").classList.add("isntRotating");
-
 function change(small, row) {
     document.getElementsByClassName("smol")[row].src = small;
 }
@@ -25,6 +23,19 @@ function check(value) {
 let map;
 var center = { lat: 44.9727, lng: -93.23540000000003 };
 function initMap() {
+    if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(
+            (position) => {
+                curLoc = {
+                    lat: position.coords.latitude,
+                    lng: position.coords.longitude,
+                };
+            },
+            () => {
+                alert("Geolocation failed. Directions will not work.");
+            }
+        )
+    }
     map = new google.maps.Map(document.getElementById("map"), {
         center: center,
         zoom: 14,
@@ -157,6 +168,54 @@ function deleteMarkers() {
     searchMarker = [];
 }
 
+var curLoc, directionsService, directionsRenderer;
 function directions () {
+    directionsService = new google.maps.DirectionsService();
+    directionsRenderer = new google.maps.DirectionsRenderer();
+    document.getElementById("transitList").textContent = "";
+    directionsRenderer.setPanel(document.getElementById("transitList"));
+    directionsRenderer.setMap(map);
+    var selectedMode = document.getElementById('means').value;
+    var dest = {
+        query: document.getElementById("destination").value,
+        fields: ['name', 'geometry'],
+    };
+    service = new google.maps.places.PlacesService(map);
+    service.findPlaceFromQuery(dest, function (results, status) {
+        if (status === google.maps.places.PlacesServiceStatus.OK) {
+            console.log(results);
+            doDirections(results[0]);
+        }
+    });
+}
+
+function doDirections(input) {
+    var means;
+    var mean = document.getElementsByName('means');
+    for (var i = 0; i < mean.length; i++) {
+        if (mean[i].checked) {
+            means = mean[i].value;
+        }
+    }
     
+    var request = {
+        origin: curLoc,
+        destination: input.geometry.location,
+        // Note that JavaScript allows us to access the constant
+        // using square brackets and a string value as its
+        // "property."
+        travelMode: google.maps.TravelMode[means]
+    };
+    directionsService.route(request, function (result, status) {
+        if (status == 'OK') {
+            directionsRenderer.setDirections(result);
+        }
+    });
 }
+
+function initForm() {
+    map = new google.maps.Map(document.getElementById("formap"), {
+        center: center,
+        zoom: 14,
+    });
+}
+\ No newline at end of file
diff --git a/csci4131/hw3/myContacts.html b/csci4131/hw3/myContacts.html
index 90f43c9..3eae9db 100644
--- a/csci4131/hw3/myContacts.html
+++ b/csci4131/hw3/myContacts.html
@@ -71,15 +71,15 @@
             <td><a href="https://carlsonschool.umn.edu/about-us/leadership-team">Home Page</a></td>
         </tr>
     </table>
-    <div class="large">
+    <span class="large">
         <img id="bigboi" src="gophers-mascot.png" alt="Goldy Gopher" class="isRotating"><br>
         <button id="luck" onclick="lucky()">Feeling Lucky</button>
         <button id="spin" onclick="dizzy()" >Feeling Dizzy</button>
-    </div>
-    <span id="googlymap">
+    </span>
+    <div id="googlymap">
         <div id="transitList"></div>
         <div id="map"></div>
-        <span id="SearchPoints">
+        <div id="SearchPoints">
             <div id="search" class="inputBox">
                 <label for="places">Find  </label>
                 <select id="places" name="places" onchange="check(this.value)">
@@ -102,10 +102,12 @@
                 <input type="radio" id="transit" name="means" value="TRANSIT"> <label for="transit">Transit</label>
                 <button onclick="directions()">GO</button>
             </div>
-        </span>
-        
-    </span>
+        </div>
+    </div>
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHA_O_rW2n6AAb9lvwOQ3wO36rtstdc90&libraries=places,geometry&callback=initMap" async defer></script>
+    <script>
+        document.getElementById("bigboi").classList.add("isntRotating");
+    </script>
 </body>
 
 </html>
diff --git a/csci4131/hw3/style.css b/csci4131/hw3/style.css
index 2be7a2b..3ab6b95 100644
--- a/csci4131/hw3/style.css
+++ b/csci4131/hw3/style.css
@@ -49,32 +49,38 @@ tr:nth-child(odd) {
 @keyframes rotate{
     100%{ transform:rotate(1turn) }
 }
-#map {
-    clear: both;
+#map, #formap {
+    /* clear: both; */
     float: left;
     padding-top: 30%;
     margin-top: 1em;
     margin-left: .2em;
-    width: 60%;
+    width: 50%;
     height: 30%;
     max-height: 40%;
 }
+#formap {
+    float: right;
+}
+#transitList {
+    float: left;
+    width: 20%;
+    color: white;
+}
 .id {
     text-align: center;
 }
-#GooglyMap {
-    overflow: hidden;
-    display: inline-block;
-    position: absolute;
-}
-#SearchPoints {
-    margin-bottom: 80em;
+#googlymap {
+    width: 100%;
+    overflow: auto;
+    /* display: flex; */
+    /* position: absolute; */
 }
+
 .inputBox {
-    float: right;
-    clear: both;
+    float: left;
     border: 1px solid black;
-    width: 32%;
+    width: 25%;
 }
 .inputBox:nth-child(even) {
     background-color:blanchedalmond;
@@ -88,6 +94,7 @@ tr:nth-child(odd) {
 
 /* Form */
 .Form {
+    float: left;
     background-color: whitesmoke;
     padding-left: 5%;
     max-width: 15%;
@@ -108,3 +115,4 @@ iframe {
 }
 
 
+
author	RossTheRoss <mstrapp@protonmail.com>	2021-02-25 10:15:00 -0600
committer	RossTheRoss <mstrapp@protonmail.com>	2021-02-25 10:15:00 -0600
commit	510f8d68c91414cea5f6e8fd360616f857df1db9 (patch)
tree	e8834d1d85ec351292141458c6ed8b762107c2cd /csci4131/hw3
parent	aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa... (diff)
download	homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar.gz homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar.bz2 homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar.lz homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar.xz homework-510f8d68c91414cea5f6e8fd360616f857df1db9.tar.zst homework-510f8d68c91414cea5f6e8fd360616f857df1db9.zip