aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorRossTheRoss <mstrapp@protonmail.com>2021-02-25 10:15:00 -0600
committerRossTheRoss <mstrapp@protonmail.com>2021-02-25 10:15:00 -0600
commit510f8d68c91414cea5f6e8fd360616f857df1db9 (patch)
treee8834d1d85ec351292141458c6ed8b762107c2cd
parentaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa... (diff)
downloadhomework-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
e
-rw-r--r--csci4131/hw3/MyForm.html5
-rw-r--r--csci4131/hw3/contacts.js63
-rw-r--r--csci4131/hw3/myContacts.html16
-rw-r--r--csci4131/hw3/style.css34
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 {
}
+