diff options
| -rw-r--r-- | csci4131/hw3/contacts.js | 84 | ||||
| -rw-r--r-- | csci4131/hw3/myContacts.html | 16 | ||||
| -rw-r--r-- | csci4131/hw3/style.css | 3 |
3 files changed, 92 insertions, 11 deletions
diff --git a/csci4131/hw3/contacts.js b/csci4131/hw3/contacts.js index 50f72d8..8701aae 100644 --- a/csci4131/hw3/contacts.js +++ b/csci4131/hw3/contacts.js @@ -16,10 +16,17 @@ function dizzy() { } isRotating^=1; } +function check(value) { + if(value==="Other") + document.getElementById('others').style.display = 'block'; + else + document.getElementById('others').style.display = 'none'; +} let map; +var center = { lat: 44.9727, lng: -93.23540000000003 }; function initMap() { map = new google.maps.Map(document.getElementById("map"), { - center: { lat: 44.9727, lng: -93.23540000000003 }, + center: center, zoom: 14, }); @@ -37,13 +44,12 @@ function initMap() { locations[kludge++] = results[0]; } if (kludge == entries.length) { - addPoints(locations); + addPointsContacts(locations); } }); } } - -function addPoints(locations) { +function addPointsContacts(locations) { for (x in locations) { var newEntry = document.getElementsByClassName("entry")[x]; var marker = new google.maps.Marker({ @@ -70,3 +76,73 @@ function addPoints(locations) { }) } } +var service; +var otherRadius; +function searchPlaces() { + var request; + if (document.getElementById("places").value!="Other") { + request = { + location: center, + radius: document.getElementById("distance").value, + type: document.getElementById("places").value, + }; + service = new google.maps.places.PlacesService(map); + service.nearbySearch(request, (results, status) => { + if (status === google.maps.places.PlacesServiceStatus.OK && results) { + addPointsSearch(results, false); + } + }); + } else { + request = { + location: center, + radius: document.getElementById("distance").value, + query: document.getElementById("others").value, + }; + otherRadius = request.radius; + console.log(otherRadius); + service = new google.maps.places.PlacesService(map); + service.textSearch(request, (results, status) => { + if (status === google.maps.places.PlacesServiceStatus.OK && results) { + addPointsSearch(results, true); + } + }); + } +} +function addPointsSearch(locations, isOther) { + console.log(locations); + for (x in locations) { + var marker; + if (isOther) { + if (google.maps.geometry.spherical.computeDistanceBetween(locations[x].geometry.location, center) < parseInt(otherRadius)) { + marker = new google.maps.Marker({ + map, + title: locations[x].name, + position: locations[x].geometry.location, + data: { + content: "<b>" + locations[x].name + "</b>" + + "<br>" + locations[x].formatted_address + }, + }); + } + } else { + var marker = new google.maps.Marker({ + map, + title: locations[x].name, + position: locations[x].geometry.location, + data: { + content: "<b>" + locations[x].name + "</b>" + + "<br>" + locations[x].vicinity + }, + }); + } + + marker.addListener('click', function () { + if (!this.infoWindow) { + this.infoWindow = new google.maps.InfoWindow({ + content: this.data.content, + }); + this.infoWindow.open(map, this); + } + }) + } +} diff --git a/csci4131/hw3/myContacts.html b/csci4131/hw3/myContacts.html index 6981209..8e722e0 100644 --- a/csci4131/hw3/myContacts.html +++ b/csci4131/hw3/myContacts.html @@ -81,20 +81,22 @@ <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> + <select id="places" name="places" onchange="check(this.value)"> + <option value="restaurant">Restaurants</option> + <option value="hospital">Hospitals</option> + <option value="parking">Parking</option> + <option value="light_rail_station">Grocery Stores</option> <option value="Other">Other</option> </select><br> - <input type="text" id="others" name="other" minlength="1"> + <input type="text" id="others" name="other" minlength="1"><br> + in <input type="text" id="distance" name="distance" minlength="1"> meters + <button onclick="searchPlaces()">Submit</button> </div> <div id="transit" class="inputBox">TRANSIT PLACEHOLDER</div> </span> </span> - <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHA_O_rW2n6AAb9lvwOQ3wO36rtstdc90&libraries=places&callback=initMap" async defer></script> + <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHA_O_rW2n6AAb9lvwOQ3wO36rtstdc90&libraries=places,geometry&callback=initMap" async defer></script> </body> </html> diff --git a/csci4131/hw3/style.css b/csci4131/hw3/style.css index aa9ae2c..2be7a2b 100644 --- a/csci4131/hw3/style.css +++ b/csci4131/hw3/style.css @@ -82,6 +82,9 @@ tr:nth-child(odd) { .inputBox:nth-child(odd) { background-color: burlywood; } +#others { + display:none; +} /* Form */ .Form { |