diff options
Diffstat (limited to 'csci4131/hw3')
-rw-r--r-- | csci4131/hw3/contacts.js | 59 | ||||
-rw-r--r-- | csci4131/hw3/myContacts.html | 65 | ||||
-rw-r--r-- | csci4131/hw3/style.css | 24 |
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; |