There is no form

From 510f8d68c91414cea5f6e8fd360616f857df1db9 Mon Sep 17 00:00:00 2001 From: RossTheRoss Date: Thu, 25 Feb 2021 10:15:00 -0600 Subject: e --- csci4131/hw3/MyForm.html | 5 ++++ csci4131/hw3/contacts.js | 63 ++++++++++++++++++++++++++++++++++++++++++-- csci4131/hw3/myContacts.html | 16 ++++++----- csci4131/hw3/style.css | 34 +++++++++++++++--------- 4 files changed, 96 insertions(+), 22 deletions(-) (limited to 'csci4131/hw3') 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 @@ There is no form +

@@ -47,4 +48,8 @@

+ 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 @@ Home Page -

- + +

- +

Find Transit

- - - +

+ 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 { } + -- cgit v1.2.3