diff options
Diffstat (limited to 'csci4131')
-rw-r--r-- | csci4131/hw3/contacts.js | 7 | ||||
-rw-r--r-- | csci4131/hw3/myContacts.html | 21 | ||||
-rw-r--r-- | csci4131/hw3/style.css | 27 |
3 files changed, 46 insertions, 9 deletions
diff --git a/csci4131/hw3/contacts.js b/csci4131/hw3/contacts.js index af8c84e..50f72d8 100644 --- a/csci4131/hw3/contacts.js +++ b/csci4131/hw3/contacts.js @@ -45,7 +45,7 @@ function initMap() { function addPoints(locations) { for (x in locations) { - newEntry = document.getElementsByClassName("entry")[x]; + var newEntry = document.getElementsByClassName("entry")[x]; var marker = new google.maps.Marker({ map, position: locations[x].geometry.location, @@ -58,16 +58,15 @@ function addPoints(locations) { 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, }); - + this.infoWindow.open(map, this); } - this.infoWindow.open(map, this); }) } } diff --git a/csci4131/hw3/myContacts.html b/csci4131/hw3/myContacts.html index 79b66ad..f9f2444 100644 --- a/csci4131/hw3/myContacts.html +++ b/csci4131/hw3/myContacts.html @@ -75,9 +75,24 @@ <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><br><br> - <div id="map"></div> - <div id="search"></div> + </div> + <span id="googlymap"> + <div id="map"></div> + <span id="SearchPoints"> + <div id="search" class="inputBox"> + <label for="places">Find </label> + <select id="places" name="places"> + <option value="Restaurants">Restaurants</option> + <option value="Hospitals">Hospitals</option> + <option value="Parking">Parking</option> + <option value="Groceries">Grocery Stores</option> + <option value="Other">Other</option> + </select> + </div> + <div id="transit" class="inputBox">g</div> + </span> + + </span> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHA_O_rW2n6AAb9lvwOQ3wO36rtstdc90&libraries=places&callback=initMap" async defer></script> </body> diff --git a/csci4131/hw3/style.css b/csci4131/hw3/style.css index 3617820..aec2316 100644 --- a/csci4131/hw3/style.css +++ b/csci4131/hw3/style.css @@ -47,11 +47,13 @@ tr:nth-child(odd) { animation-play-state: paused; } @keyframes rotate{ - 100%{ transform:rotate(1turn) } // or 360deg + 100%{ transform:rotate(1turn) } } #map { + float: left; + clear: both; padding-top: 30%; - margin-top: 25em; + margin-top: 1em; margin-left: .2em; position: bottom; width: 60%; @@ -61,6 +63,27 @@ tr:nth-child(odd) { .id { text-align: center; } +#GooglyMap { + overflow: hidden; + display: inline-block; + position: absolute; +} +#SearchPoints { + margin-bottom: 80em; +} +.inputBox { + float: right; + clear: both; + border: 1px solid black; + width: 30%; + margin-right: 0; +} +.inputBox:nth-child(even) { + background-color:blanchedalmond; +} +.inputBox:nth-child(odd) { + background-color: burlywood; +} /* Form */ .Form { |