Update project directory

- google map 형식에 맞춰 삽입, 사용가능한지 확인.
- 주소 검색으로 마커,위도,경도 확인가능
- database 이용 직전까지.

@@ -6,6 +6,8 @@ var postSchema = mongoose.Schema({
     title:{type:String, required:[true, 'Title is required!']},
     body:{type:String, required:[true, 'Content is required!']},
     author:{type:mongoose.Schema.Types.ObjectId, ref:'user', required:true},
+    lat:{type:Number, required:true},
+    lng:{type:Number, required:true},
     createdAt:{type:Date, default:Date.now},
     updatedAt:{type:Date},
 });

@@ -17,7 +17,7 @@
     "express": "^4.17.1",
     "express-session": "^1.17.1",
     "method-override": "^3.0.0",
-    "mongoose": "^5.12.8",
+    "mongoose": "^5.12.10",
     "passport": "^0.4.1",
     "passport-local": "^1.0.0"
   }

+#map {
+    height: 100%;
+  }
+
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  #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;
+  }
\ No newline at end of file

+<!--css-->
+<link rel="stylesheet" href="/css/map.css">
+
+<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
+
+<!--google map geocode api key-->
+<script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK6K4iDdo9cKQdrNoOJaaYg29nEG0BIjw&callback=initMap&libraries=&v=weekly"
+      async
+
+      
+></script>
+
+    <!--지도 띄우기 : 서울-->
+<script>
+      function initMap() {
+        const map = new google.maps.Map(document.getElementById("map"), {
+          zoom: 8,
+          center: { lat: 37.33, lng: 126.58 },
+        });
+      
+        const geocoder = new google.maps.Geocoder();
+        document.getElementById("submit").addEventListener("click", () => {
+          geocodeAddress(geocoder, map);
+        });
+      }
+      // geocodeAddress는 주소를 처리하고, marker를 생성하는 함수이다.
+      function geocodeAddress(geocoder, resultsMap) {
+        const address = document.getElementById('address').value;
+        geocoder.geocode({ address: address }, (results, status) => {
+          if (status === "OK") {
+            var address_lat = results[0].geometry.location.lat();
+            var address_lng = results[0].geometry.location.lng();
+
+            resultsMap.setCenter(results[0].geometry.location);
+            new google.maps.Marker({
+              map: resultsMap,
+              position: results[0].geometry.location,
+              draggable : false
+            });
+            alert('주소 : '+address_lat+' '+address_lng);
+            //alert위치에 mongoose에 주소를 저장하는 코드를 넣자!
+            //show.ejs나 edit.ejs를 띄웠을 때 지도 위에 마커가 떠 있도록 하자.(기존 코드 변경)
+          } else {
+            alert(
+              "Geocode was not successful for the following reason: " + status
+            );
+          }
+        });
+        
+
+}
+</script>
+
+<!--
+// views/posts에 new.ejs, edit.ejs 수정. show.ejs 수정.
+// views/partials에 map.ejs추가
+
+// routes/posts.js에 기능 추가 
+// new, edit, show ejs 파일들에 지도 넣고, 마커 남기기 기능 완료.
+// marker의 주소를 저장하여(database), show ejs, edit.ejs시에 마커를 띄워주기.
+edit : 마커 남아있음, create mapmory button도 남아있음.
+show : 마커만 남아있음.
+-->

@@ -49,5 +49,13 @@
       </form>
 
     </div>
+    <!--map추가 code 시작.-->
+    <%- include('../partials/map') %>
+    <div id="map"></div>
+    <div id="floating-panel">
+        <input id="address" type="textbox" value="Seoul, Korea" />
+        <input id="submit" type="button" value="Create Mapmory" />
+    </div>
+    <!--map추가 code끝-->
   </body>
 </html>
\ No newline at end of file

@@ -39,12 +39,20 @@
           </div>
         <% } %>
         
+
         <div>
           <a class="btn btn-primary" href="/posts">Back</a>
           <button type="submit" class="btn btn-primary">Submit</button>
         </div>
-
-      </form>
-    </div>
+      </div>
+          <!--map추가 code 시작.-->
+          <%- include('../partials/map') %>
+          <div id="map"></div>
+          <div id="floating-panel">
+              <input id="address" type="textbox" value="Seoul, Korea" />
+              <input id="submit" type="button" value="Create Mapmory" />
+          </div>
+          <!--map추가 code끝-->
+        </form>
   </body>
 </html>
\ No newline at end of file

@@ -50,5 +50,9 @@
       </div>
 
     </div>
+    <!--map추가 code 시작.-->
+    <%- include('../partials/map') %>
+    <div id="map"></div>
+    <!--map추가 code끝-->
   </body>
 </html>
\ No newline at end of file