Remove all JS code from index.html

spaceappsnyc · Oct 21, 2018 · 1709044 · 1709044
1 parent d871767
commit 1709044
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 74 deletions.
diff --git a/index.html b/index.html
@@ -101,80 +101,7 @@ <h1 class="mb-0 py-3"><i class="fas fa-globe"></i>Gryffindor<i class="fas fa-glo
     </footer>
     <script src="main.js"></script>
     <script type="text/javascript" src="predicted.js"></script>
-    <script>
-      function initMap() {
-        var map = new google.maps.Map(document.getElementById('map'), {
-          zoom: 7,
-          center: {lat: 34.8021, lng: 38.9968}
-        });
-
-        setMarkers(map);
-      }
-
-      function setMarkers(map) {
-        var image = {
-          url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
-          size: new google.maps.Size(20, 32),
-          origin: new google.maps.Point(0, 0),
-          anchor: new google.maps.Point(0, 32)
-        };
-
-        var bounds = new google.maps.LatLngBounds();
-        for (var i = 0; i < payload.length; i++) {
-
-          var beach = payload[i];
-          var marker = new google.maps.Marker({
-            position: {lat: beach['Latitude'], lng: beach['Longitude']},
-            map: map,
-            content: payload[i]['Region'],
-            icon: image,
-            title: beach['Region'],
-            zIndex: null
-          });
-
-          var infowindow = new google.maps.InfoWindow();
-          google.maps.event.addListener(marker, 'click', (function (marker, i, infowindow) {
-              return function () {
-                console.log("this", payload[i])
-                console.log("this", payload[i].Latitude)
-                console.log("error", payload[i]['Mean squared error'])
-                console.log("error", payload[i]['Population in 2015'])
-                console.log("error", payload[i]['Surface water in sq.km'])
-
-
-                const detailDiv = document.getElementById('location-details');
-
-                if (!detailDiv.children.length) {
-                  const header = document.createElement('h2');
-                  header.setAttribute('id', 'location-header')
-                  header.innerHTML = this.title;
-                  detailDiv.appendChild(header);
-
-                  for (let key in payload[i]) {
-                    const node = document.createElement('p');
-                    node.innerHTML = key + ': ' + payload[i][key];
-                    node.setAttribute('id', key)
-                    detailDiv.appendChild(node); 
-                  }
-                } else {
-                  const header = document.getElementById('location-header');
-                  header.innerHTML = payload[i]['Region'];
-                  for (let key in payload[i]) {
-                    const node = document.getElementById(key);
-                    node.innerHTML = key + ': ' + payload[i][key];
-                  }
-                }
-
-
-                  infowindow.setContent(this.content);
-                  infowindow.open(map, this);
-              };
-          })(marker, i, infowindow));
-          bounds.extend(marker.position);
-        }
-
-      }
-    </script>
+    <script src="map.js"></script>
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMRz9RilOuyHF78KhFdfW9GgDANQfd78Y&callback=initMap"></script>
     <script src="checkbox.js"></script>
   </body>

diff --git a/map.js b/map.js
@@ -0,0 +1,73 @@
+function initMap() {
+  var map = new google.maps.Map(document.getElementById('map'), {
+    zoom: 7,
+    center: {lat: 34.8021, lng: 38.9968},
+  });
+
+  setMarkers(map);
+}
+
+function setMarkers(map) {
+  var image = {
+    url:
+      'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
+    size: new google.maps.Size(20, 32),
+    origin: new google.maps.Point(0, 0),
+    anchor: new google.maps.Point(0, 32),
+  };
+
+  var bounds = new google.maps.LatLngBounds();
+  for (var i = 0; i < payload.length; i++) {
+    var beach = payload[i];
+    var marker = new google.maps.Marker({
+      position: {lat: beach['Latitude'], lng: beach['Longitude']},
+      map: map,
+      content: payload[i]['Region'],
+      icon: image,
+      title: beach['Region'],
+      zIndex: null,
+    });
+
+    var infowindow = new google.maps.InfoWindow();
+    google.maps.event.addListener(
+      marker,
+      'click',
+      (function(marker, i, infowindow) {
+        return function() {
+          console.log('this', payload[i]);
+          console.log('this', payload[i].Latitude);
+          console.log('error', payload[i]['Mean squared error']);
+          console.log('error', payload[i]['Population in 2015']);
+          console.log('error', payload[i]['Surface water in sq.km']);
+
+          const detailDiv = document.getElementById('location-details');
+
+          if (!detailDiv.children.length) {
+            const header = document.createElement('h2');
+            header.setAttribute('id', 'location-header');
+            header.innerHTML = this.title;
+            detailDiv.appendChild(header);
+
+            for (let key in payload[i]) {
+              const node = document.createElement('p');
+              node.innerHTML = key + ': ' + payload[i][key];
+              node.setAttribute('id', key);
+              detailDiv.appendChild(node);
+            }
+          } else {
+            const header = document.getElementById('location-header');
+            header.innerHTML = payload[i]['Region'];
+            for (let key in payload[i]) {
+              const node = document.getElementById(key);
+              node.innerHTML = key + ': ' + payload[i][key];
+            }
+          }
+
+          infowindow.setContent(this.content);
+          infowindow.open(map, this);
+        };
+      })(marker, i, infowindow),
+    );
+    bounds.extend(marker.position);
+  }
+}