diff options
| -rw-r--r-- | csci4131/hw3/MyForm.html | 5 | ||||
| -rw-r--r-- | csci4131/hw3/contacts.js | 63 | ||||
| -rw-r--r-- | csci4131/hw3/myContacts.html | 16 | ||||
| -rw-r--r-- | csci4131/hw3/style.css | 34 |
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 { } + |