I don't like JavaScript

3 files changed, 100 insertions, 48 deletions

diff --git a/csci4131/hw3/contacts.js b/csci4131/hw3/contacts.js
index 0e9b8bb..94340b2 100644
--- a/csci4131/hw3/contacts.js
+++ b/csci4131/hw3/contacts.js
@@ -1,8 +1,61 @@
-function change(big, small, row) {
-    // document.getElementById("bigboi").src = big;
-    document.getElementById("smol" + row).src = small;
+function change(small, row) {
+    document.getElementsByClassName("smol")[row].src = small;
 }
 function lucky() {
     var image = ["carlson.jpg", "johnston.jpg", "morrill.jpg", "shepherd.jpg", "snyder.jpg", "walter.jpg"];
     document.getElementById("bigboi").src = image[Math.floor(6 * Math.random())];
 }
+let map;
+function initMap() {
+    map = new google.maps.Map(document.getElementById("map"), {
+        center: { lat: 44.9727, lng: -93.23540000000003 },
+        zoom: 14,
+    });
+
+    var service = new google.maps.places.PlacesService(map);
+    entries = document.getElementsByClassName("entry");
+    locations = [];
+    for (e=0; e<entries.length; e+=1) {
+        var kludge = 0;
+        var request = {
+            query: entries[e].getElementsByClassName("address")[0].textContent,
+            fields: ['name', 'geometry'],
+        };
+        service.findPlaceFromQuery(request, function (results, status) {
+            if (status === google.maps.places.PlacesServiceStatus.OK) {
+                locations[kludge++] = results[0];
+            }
+            if (kludge == entries.length) {
+                addPoints(locations);
+            }
+        });
+    }
+}
+
+function addPoints(locations) {
+    for (x in locations) {
+        newEntry = document.getElementsByClassName("entry")[x];
+        var marker = new google.maps.Marker({
+            map,
+            position: locations[x].geometry.location,
+            title: newEntry.getElementsByClassName("name")[0].textContent,
+            data : {
+                content:    "<div class='id'>" + 
+                            "<b>" + newEntry.getElementsByClassName("name")[0].textContent + "</b>" + "<br>" +
+                            newEntry.getElementsByClassName("category")[0].textContent + "<br>" +
+                            newEntry.getElementsByClassName("room")[0].textContent + " " + newEntry.getElementsByClassName("street")[0].textContent + "<br>" +
+                            newEntry.getElementsByClassName("city")[0].textContent + 
+                            "</div>",
+            }
+        });
+        marker.addListener('click', function () {
+            if (!this.infoWindow) {
+                this.infoWindow = new google.maps.InfoWindow({
+                    content: this.data.content,
+                    // content: newEntry.getElementsByClassName("address")[0],
+                });
+            }
+            this.infoWindow.open(map, this);
+        })
+    }
+}
\ No newline at end of file
diff --git a/csci4131/hw3/myContacts.html b/csci4131/hw3/myContacts.html
index 14de8be..5a4169c 100644
--- a/csci4131/hw3/myContacts.html
+++ b/csci4131/hw3/myContacts.html
@@ -30,43 +30,43 @@
             <th>Email</th>
             <th>URL</th>
         </tr>
-        <tr onmouseover="change('morrill.jpg', 'morrill.jpg', 0)" onmouseout="change('morrill.jpg', 'data:,', 0)">
-            <td>Joan Gabel</td>
-            <td>Industry</td>
-            <td>100 Church Street SE<br> 202 Morrill Hall<br> Minneapolis MN 55455</td>
-            <td>President of the University of Minnesota<br><img class="smol" id="smol0" src="data:," alt></td>
+        <tr class ="entry" onmouseover="change('morrill.jpg', 0)" onmouseout="change('data:,', 0)">
+            <td class="name">Joan Gabel</td>
+            <td class="category">Industry</td>
+            <td class="address"><span class="street">100 Church Street SE</span><br> <div class="room">202 Morrill Hall</div> <span class="city">Minneapolis MN 55455</span></td>
+            <td class="title">President of the University of Minnesota<br><img class="smol" id="smol0" src="data:," alt></td>
             <td><a href="mailto:upres@umn.edu">upres@umn.edu</a></td>
             <td><a href="https://president.umn.edu/">Home Page</a></td>
         </tr>
-        <tr onmouseover="change('walter.jpg', 'walter.jpg', 1)" onmouseout="change('walter.jpg', 'data:,', 1)">
-            <td>Mostafa Kaveh</td>
-            <td>Industry</td>
-            <td>117 Pleasant St SE<br> 105 Walter Library<br> Minneapolis MN 55455</td>
-            <td>Dean of the College of Science and Engineering<br><img class="smol" id="smol1" src="data:," alt></td>
+        <tr class ="entry" onmouseover="change('walter.jpg', 1)" onmouseout="change('data:,', 1)">
+            <td class="name">Mostafa Kaveh</td>
+            <td class="category">Industry</td>
+            <td class="address"><span class="street">117 Pleasant St SE</span><br> <div class="room">105 Walter Library</div> <span class="city">Minneapolis MN 55455</span></td>
+            <td class="title">Dean of the College of Science and Engineering<br><img class="smol" id="smol1" src="data:," alt></td>
             <td><a href="mailto:mos@umn.edu">mos@umn.edu</a></td>
             <td><a href="https://cse.umn.edu/college/office-dean">Home Page</a></td>
         </tr>
-        <tr onmouseover="change('johnston.jpg', 'johnston.jpg', 2)" onmouseout="change('johnston.jpg', 'data:,', 2)">
-            <td>John Coleman</td>
-            <td>Industry</td>
-            <td>101 Pleasant Street SE<br> 215 Johnston Hall<br> Minneapolis MN 55455</td>
-            <td>Dean of the College of Liberal Arts<br><img class="smol" id="smol2" src="data:," alt></td>
+        <tr class ="entry" onmouseover="change('johnston.jpg', 2)" onmouseout="change('data:,', 2)">
+            <td class="name">John Coleman</td>
+            <td class="category">Industry</td>
+            <td class="address"><span class="street">101 Pleasant Street SE</span><br> <div class="room">215 Johnston Hall</div> <span class="city">Minneapolis MN 55455</span></td>
+            <td class="title">Dean of the College of Liberal Arts<br><img class="smol" id="smol2" src="data:," alt></td>
             <td><a href="mailto:coleman@umn.edu">coleman@umn.edu</a></td>
             <td><a href="https://cla.umn.edu/units/dean">Home Page</a></td>
         </tr>
-        <tr onmouseover="change('snyder.jpg', 'snyder.jpg', 3)" onmouseout="change('snyder.jpg', 'data:,', 3)">
-            <td>Valery Forbes</td>
-            <td>Industry</td>
-            <td>1475 Gortner Avenue<br> 123 Snyder Hall<br> St. Paul MN 55108</td>
-            <td>Dean of the College of Biological Sciences<br><img class="smol" id="smol3" src="data:," alt></td>
+        <tr class ="entry" onmouseover="change('snyder.jpg', 3)" onmouseout="change('data:,', 3)">
+            <td class="name">Valery Forbes</td>
+            <td class="category">Industry</td>
+            <td class="address"><span class="street">1475 Gortner Avenue</span><br> <div class="room">123 Snyder Hall</div> <span class="city">St. Paul MN 55108</span></td>
+            <td class="title">Dean of the College of Biological Sciences<br><img class="smol" id="smol3" src="data:," alt></td>
             <td><a href="mailto:cbsdeans@umn.edu">cbsdeans@umn.edu</a></td>
             <td><a href="https://cbs.umn.edu/about/college-leadership">Home Page</a></td>
         </tr>
-        <tr onmouseover="change('carlson.jpg', 'carlson.jpg', 4)" onmouseout="change('carlson.jpg', 'data:,', 4)">
-            <td>Sri Zaheer</td>
-            <td>Industry</td>
-            <td>321 19th Avenue S<br> Suite 4-300 Carlson School of Management<br> Minneapolis MN 55455</td>
-            <td>Dean of the Carlson School of Management<br><img class="smol" id="smol4" src="data:," alt></td>
+        <tr class ="entry" onmouseover="change('carlson.jpg', 4)" onmouseout="change('data:,', 4)">
+            <td class="name">Sri Zaheer</td>
+            <td class="category">Industry</td>
+            <td class="address"><span class="street">321 19th Avenue S</span><br> <div class="room">Suite 4-300 Carlson School of Management</div> <span class="city">Minneapolis MN 55455</span></td>
+            <td class="title">Dean of the Carlson School of Management<br><img class="smol" id="smol4" src="data:," alt></td>
             <td><a href="mailto:szaheer@umn.edu">szaheer@umn.edu</a></td>
             <td><a href="https://carlsonschool.umn.edu/about-us/leadership-team">Home Page</a></td>
         </tr>
@@ -75,18 +75,9 @@
         <img id="bigboi" src="gophers-mascot.png" alt="Goldy Gopher"><br>
         <button id="luck" onclick="lucky()">Feeling Lucky</button>
     </div><br>
-    <div id="contactMap"></div>
-        <script>
-            var map;
-                function initMap() {
-                    var myLatLng = { lat: 44.9727, lng: -93.23540000000003 };
-                    map = new google.maps.Map(document.getElementById('contactMap'), {
-                        center: myLatLng,
-                        zoom: 14
-                    });
-                }
-        </script>
-        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHA_O_rW2n6AAb9lvwOQ3wO36rtstdc90&libraries=places&callback=initMap" async defer></script>
+    <div id="map"></div>
+    <div id="search"></div>
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHA_O_rW2n6AAb9lvwOQ3wO36rtstdc90&libraries=places&callback=initMap" async defer></script>
 </body>
 
 </html>
diff --git a/csci4131/hw3/style.css b/csci4131/hw3/style.css
index 970ef9b..a4e9ec2 100644
--- a/csci4131/hw3/style.css
+++ b/csci4131/hw3/style.css
@@ -8,16 +8,17 @@ body {
     background-color: white;
     border-collapse: separate;
 }
+
 /* Contacts */
 table, th, td {
-    max-width: 70%;
+    max-width: 80%;
     overflow-x:auto;
     border: 1px solid black; 
     border-collapse: collapse;
 }
 table {
     float:left;
-    max-width: 50%;
+    max-width: 60%;
 }
 tr:nth-child(even) {
     background-color:blanchedalmond;
@@ -31,20 +32,27 @@ tr:nth-child(odd) {
 }
 .large {
     float: right;
-    max-width:max-content
+    max-width: max-content;
 }
 #bigboi {
     width: 25em;
     height: 15em;
     object-fit: cover;
+    margin-right: 0;
 }
 #map {
-	height: 50%;
-	margin-left: 10%;
-    margin-right: 10%;
-    margin-top: 10%;
-    float: bottom;
+    padding-top: 30%;
+    margin-top: 25em;
+    margin-left: .2em;
+    position: bottom;
+    width: 60%;
+    height: 30%;
+    max-height: 40%;
+}
+.id {
+    text-align: center;
 }
+
 /* Form */
 .Form {
     background-color: whitesmoke;