added options box with show hide listings

G1enB1and · Jan 17, 2019 · 503bf22 · 503bf22
1 parent a83cdeb
commit 503bf22
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 9 deletions.
diff --git a/Index.html b/Index.html
@@ -21,7 +21,21 @@
 
   <body>
 
-    <div id="map"></div>
+    <div class="container">
+      <div class="options-box">
+
+        <h1>Find Your New NYC Home</h1>
+
+        <div>
+          <input id="show-listings" type="button" value="Show Listings">
+          <input id="hide-listings" type="button" value="Hide Listings">
+        </div>
+
+      </div> <!-- end of div class="options-box" -->
+
+      <div id="map"></div>
+
+    </div> <!-- end of div class="container" -->
 
 	<!-- google maps initMap callback script-->
     <script async defer

diff --git a/css/style.css b/css/style.css
@@ -6,6 +6,42 @@ body {
   padding: 0;
 }
 
+.container {
+  height: 100%;
+  position: relative;
+}
+
+input {
+  font-size: 12px;
+}
+
+h1 {
+  color: #525454;
+  font-size: 22px;
+  margin: 0 0 10px 0;
+  text-align: center;
+}
+
+#hide-listings,
+#show-listings {
+  width: 48%;
+}
+
 #map {
+  position: absolute;
+  height: 100%;
+  bottom: 0;
+  left: 362px;
+  right: 0;
+}
+
+.options-box {
+  background: #fff;
+  border: 1px solid #999;
+  border-radius: 3px;
   height: 100%;
+  line-height: 35px;
+  padding: 10px 10px 30px 10px;
+  text-align: left;
+  width: 340px;
 }
diff --git a/js/script.js b/js/script.js
@@ -7,7 +7,8 @@ function initMap() {
   // Constructor creates a new map - only center and zoom are required.
   map = new google.maps.Map(document.getElementById('map'), {
     center: {lat: 40.7413549, lng: -73.9980244},
-    zoom: 13
+    zoom: 13,
+	mapTypeControl: false
   });
 
   // These are the listings that will be shown to the user.
@@ -22,7 +23,6 @@ function initMap() {
   ];
 
   var largeInfowindow = new google.maps.InfoWindow();
-  var bounds = new google.maps.LatLngBounds();
 
   // The following group uses the location array to create an array of markers on initialize.
   for (var i = 0; i < locations.length; i++) {
@@ -32,7 +32,6 @@ function initMap() {
 
     // Create a marker per location, and put into markers array.
     var marker = new google.maps.Marker({
-      map: map,
       position: position,
       title: title,
       animation: google.maps.Animation.DROP,
@@ -46,11 +45,11 @@ function initMap() {
     marker.addListener('click', function() {
       populateInfoWindow(this, largeInfowindow);
     });
-    bounds.extend(markers[i].position);
-  }
+  } // end of for (var i = 0; i < locations.length; i++)
+
+  document.getElementById('show-listings').addEventListener('click', showListings);
+  document.getElementById('hide-listings').addEventListener('click', hideListings);
 
-  // Extend the boundaries of the map for each marker
-  map.fitBounds(bounds);
 } // end of initMap()
 
 // This function populates the infowindow when the marker is clicked.
@@ -65,4 +64,22 @@ function populateInfoWindow(marker, infowindow) {
       infowindow.setMarker = null;
     });
   }
-} //end of populateInfoWindow()
+} //end of populateInfoWindow()
+
+// This function will loop through the markers array and display them all.
+function showListings() {
+  var bounds = new google.maps.LatLngBounds();
+  // Extend the boundaries of the map for each marker and display the marker
+  for (var i = 0; i < markers.length; i++) {
+    markers[i].setMap(map);
+    bounds.extend(markers[i].position);
+  }
+  map.fitBounds(bounds);
+}
+
+// This function will loop through the listings and hide them all.
+function hideListings() {
+  for (var i = 0; i < markers.length; i++) {
+    markers[i].setMap(null);
+  }
+}