임태민 / Mapmory

Go to a project
Toggle navigation Toggle navigation pinning
홍지윤
2a07a51a 1 parent ee497a38

Update project directory 

- new,show 기능에 map추가.(marker도)
- mongoose에 address 추가해서 marker 불러오게끔 구현(디자인은 구림)
- edit 기능 미구현. edit 구현전 저장
Inline Side-by-side
Showing 5 changed files with 169 additions and 2 deletions
...@@ -4,6 +4,7 @@ const mongoose = require('mongoose'); ...@@ -4,6 +4,7 @@ const mongoose = require('mongoose');
4 // Declare the schemea of post 4 // Declare the schemea of post
5 var postSchema = mongoose.Schema({ 5 var postSchema = mongoose.Schema({
6 title:{type:String, required:[true, 'Title is required!']}, 6 title:{type:String, required:[true, 'Title is required!']},
7 + address:{type:String, required:[true, 'address is required!']},
7 body:{type:String, required:[true, 'Content is required!']}, 8 body:{type:String, required:[true, 'Content is required!']},
8 author:{type:mongoose.Schema.Types.ObjectId, ref:'user', required:true}, 9 author:{type:mongoose.Schema.Types.ObjectId, ref:'user', required:true},
9 createdAt:{type:Date, default:Date.now}, 10 createdAt:{type:Date, default:Date.now},
......
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title>Geocoding Service</title>
5 + <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
6 + <style type="text/css">
7 + #map {
8 + height: 100%;
9 + }
10 +
11 + html,
12 + body {
13 + height: 100%;
14 + margin: 0;
15 + padding: 0;
16 + }
17 +
18 + #floating-panel {
19 + position: absolute;
20 + top: 425px;
21 + left: 25%;
22 + z-index: 5;
23 + background-color: #fff;
24 + padding: 5px;
25 + border: 1px solid #999;
26 + text-align: center;
27 + font-family: "Roboto", "sans-serif";
28 + line-height: 30px;
29 + padding-left: 10px;
30 + }
31 + </style>
32 + <script>
33 + // initMap은 처음 map을 켰을 때 화면을 생성하는 함수.
34 + function initMap() {
35 + const map = new google.maps.Map(document.getElementById("map"), {
36 + zoom: 8,
37 + center: { lat: 37.33, lng: 126.58 },
38 + });
39 +
40 + const geocoder = new google.maps.Geocoder();
41 + document.getElementById("submit").addEventListener("click", () => {
42 + geocodeAddress(geocoder, map);
43 +
44 + });
45 + }
46 + // geocodeAddress는 주소를 처리하고, marker를 생성하는 함수이다.
47 + function geocodeAddress(geocoder, resultsMap) {
48 + const address = document.getElementById("address").value;
49 + geocoder.geocode({ address: address }, (results, status) => {
50 + if (status === "OK") {
51 + resultsMap.setCenter(results[0].geometry.location);
52 + new google.maps.Marker({
53 + map: resultsMap,
54 + position: results[0].geometry.location,
55 + draggable : false
56 + });
57 + } else {
58 + alert(
59 + "Geocode was not successful for the following reason: " + status
60 + );
61 + }
62 + });
63 + }
64 + </script>
65 + </head>
66 + <body>
67 + <div id="floating-panel">
68 + <input id="submit" type="button" value="find location" />
69 + </div>
70 + <div id="map"></div>
71 +
72 + <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
73 + <script
74 + src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK6K4iDdo9cKQdrNoOJaaYg29nEG0BIjw&callback=initMap&libraries=&v=weekly"
75 + async
76 + ></script>
77 + </body>
78 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <title>Geocoding Service</title>
5 + <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
6 + <style type="text/css">
7 + #map {
8 + height: 100%;
9 + }
10 +
11 + html,
12 + body {
13 + height: 100%;
14 + margin: 0;
15 + padding: 0;
16 + }
17 +
18 + #floating-panel {
19 + position: absolute;
20 + top: 400px;
21 + left: 25%;
22 + z-index: 5;
23 + background-color: #fff;
24 + padding: 5px;
25 + border: 1px solid #999;
26 + text-align: center;
27 + font-family: "Roboto", "sans-serif";
28 + line-height: 30px;
29 + padding-left: 10px;
30 + }
31 + </style>
32 + <script>
33 + // initMap은 처음 map을 켰을 때 화면을 생성하는 함수.
34 + function initMap() {
35 + const map = new google.maps.Map(document.getElementById("map"), {
36 + zoom: 8,
37 + center: { lat: 37.33, lng: 126.58 },
38 + });
39 +
40 + const geocoder = new google.maps.Geocoder();
41 + document.getElementById("submit").addEventListener("click", () => {
42 + geocodeAddress(geocoder, map);
43 +
44 + });
45 + }
46 + // geocodeAddress는 주소를 처리하고, marker를 생성하는 함수이다.
47 + function geocodeAddress(geocoder, resultsMap) {
48 + const address = "<%= post.address %>";
49 + geocoder.geocode({ address: address }, (results, status) => {
50 + if (status === "OK") {
51 + resultsMap.setCenter(results[0].geometry.location);
52 + new google.maps.Marker({
53 + map: resultsMap,
54 + position: results[0].geometry.location,
55 + draggable : false
56 + });
57 + } else {
58 + alert(
59 + "Geocode was not successful for the following reason: " + status
60 + );
61 + }
62 + });
63 + }
64 + </script>
65 + </head>
66 + <body>
67 + <div id="floating-panel">
68 + <input id="submit" type="button" value="find location" />
69 + </div>
70 + <div id="map"></div>
71 +
72 + <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
73 + <script
74 + src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK6K4iDdo9cKQdrNoOJaaYg29nEG0BIjw&callback=initMap&libraries=&v=weekly"
75 + async
76 + ></script>
77 + </body>
78 +</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -27,6 +27,14 @@ ...@@ -27,6 +27,14 @@
27 </div> 27 </div>
28 28
29 <div class="form-group"> 29 <div class="form-group">
30 + <label for="address">address</label>
31 + <input type="text" id="address" name="address" value="<%= post.address %>" class="form-control <%= (errors.address)?'is-invalid':'' %>">
32 + <% if(errors.address){ %>
33 + <span class="invalid-feedback"><%= errors.address.message %></span>
34 + <% } %>
35 + </div>
36 +
37 + <div class="form-group">
30 <textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':''%>"><%= post.body %></textarea> 38 <textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':''%>"><%= post.body %></textarea>
31 <% if(errors.body){ %> 39 <% if(errors.body){ %>
32 <span class="invalid-feedback"><%= errors.body.message %></span> 40 <span class="invalid-feedback"><%= errors.body.message %></span>
...@@ -46,5 +54,6 @@ ...@@ -46,5 +54,6 @@
46 54
47 </form> 55 </form>
48 </div> 56 </div>
57 + <%- include('../partials/gmap') %>
49 </body> 58 </body>
50 </html> 59 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
17 </nav> 17 </nav>
18 18
19 <div class="card"> 19 <div class="card">
20 - <h5 class="card-header p-2"><%= post.title %></h5> 20 + <h5 class="card-header p-2"><%= post.address %></h5>
21 <div class="row"> <!-- 1 --> 21 <div class="row"> <!-- 1 -->
22 22
23 <div class="col-md-7 col-lg-8 col-xl-9 order-sm-2 order-md-1"> <!-- 1 --> 23 <div class="col-md-7 col-lg-8 col-xl-9 order-sm-2 order-md-1"> <!-- 1 -->
...@@ -48,7 +48,8 @@ ...@@ -48,7 +48,8 @@
48 </form> 48 </form>
49 <% } %> 49 <% } %>
50 </div> 50 </div>
51 -
52 </div> 51 </div>
52 + <%- include('../partials/showgmap') %>
53 +
53 </body> 54 </body>
54 </html> 55 </html>
...\ No newline at end of file ...\ No newline at end of file
......