startup-systems · amberMZ · Sep 26, 2016
diff --git a/index.html b/index.html
@@ -1,8 +1,111 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Mashup</title>
+    <meta charset="utf-8">
+    <title>My favourite places in NYC</title>
+    <style>
+      html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+      #map {
+        height: 100%;
+      }
+      #floating-panel {
+        position: absolute;
+        top: 10px;
+        left: 25%;
+        z-index: 5;
+        background-color: #fff;
+        padding: 5px;
+        border: 1px solid #999;
+        text-align: center;
+        font-family: 'Roboto','sans-serif';
+        line-height: 30px;
+        padding-left: 10px;
+      }
+      #floating-panel {
+        margin-left: -52px;
+      }
+    </style>
   </head>
   <body>
+    <div id="floating-panel">
+      <button id="drop" onclick="drop()">Reveal My favourite Places!</button>
+
+      <p id="search">
+          latitude: <input type="text" id="lat"/>
+          longitude: <input type="text" id="lon"/>
+      </p>
+      <button id="user" onclick="userPin()">Add yours now</button>
+      <p id="hold"></p>
+    </div>
+    <div id="map"></div>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+    <script>
+
+      var ct = {lat: 40.740816, lng: -74.002235}; // cornell tech
+      var jt = {lat: 40.742674, lng: -74.000727}; // the joyce theater
+      var cm = {lat: 40.742034, lng: -74.005285}; // Chelsee Market
+      var wma = {lat: 40.739501, lng: -74.009192}; // Whitny Museum of American Art
+      var rma = {lat: 40.740052, lng: -73.997951}; // Rubin Museum of Art
+      // var ct = {lat: 40.740816, lng: -74.002235};
+
+      var neighborhoods = [ ct, jt, cm, wma, rma ];
+
+      var markers = [];
+      var map;
+
+      function addMarkerWithTimeout(position, timeout) {
+        window.setTimeout(function() {
+          markers.push(new google.maps.Marker({
+            position: position,
+            map: map,
+            animation: google.maps.Animation.DROP
+          }));
+        }, timeout);
+      }
+
+
+      function initMap() {
+        map = new google.maps.Map(document.getElementById('map'), {
+          zoom: 16,
+          center: wma
+        });
+      }
+
+      function drop() {
+        // clearMarkers();
+        for (var i = 0; i < neighborhoods.length; i++) {
+          addMarkerWithTimeout(neighborhoods[i], i * 200);
+        }
+      }
+
+      // function clearMarkers() {
+      //   for (var i = 0; i < markers.length; i++) {
+      //     markers[i].setMap(null);
+      //   }
+      //   markers = [];
+      // }
+
+      function userPin() {
+        var lat = $("#lat").val();
+        var lon = $("#lon").val();
+        var loc = lat.concat(", ").concat(lon);
+        var userMarker = {lat: Number(lat), lng: Number(lon)};
+        addMarkerWithTimeout(userMarker, 200);
+        var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + loc + "&sensor=false";
+        $.getJSON(url, function (data) {
+            $("#hold").append("Your place " + data.results[0].formatted_address + " is added!");
+          // alert("Your place " + data.results[0].formatted_address + " is added!");
+        });
+      }
+
+
+    </script>
+    <script async defer
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQe418qeYPuBeuB76ax3J7yg9k7EN-WQ&callback=initMap">
+    </script>
   </body>
 </html>