aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--csci4131/hw3/contacts.js84
-rw-r--r--csci4131/hw3/myContacts.html16
-rw-r--r--csci4131/hw3/style.css3
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 {