임태민 / 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');
// Declare the schemea of post
var postSchema = mongoose.Schema({
title:{type:String, required:[true, 'Title is required!']},
address:{type:String, required:[true, 'address is required!']},
body:{type:String, required:[true, 'Content is required!']},
author:{type:mongoose.Schema.Types.ObjectId, ref:'user', required:true},
createdAt:{type:Date, default:Date.now},
......
<!DOCTYPE html>
<html>
<head>
<title>Geocoding Service</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 425px;
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;
}
</style>
<script>
// initMap은 처음 map을 켰을 때 화면을 생성하는 함수.
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") {
resultsMap.setCenter(results[0].geometry.location);
new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location,
draggable : false
});
} else {
alert(
"Geocode was not successful for the following reason: " + status
);
}
});
}
</script>
</head>
<body>
<div id="floating-panel">
<input id="submit" type="button" value="find location" />
</div>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK6K4iDdo9cKQdrNoOJaaYg29nEG0BIjw&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>Geocoding Service</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 400px;
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;
}
</style>
<script>
// initMap은 처음 map을 켰을 때 화면을 생성하는 함수.
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 = "<%= post.address %>";
geocoder.geocode({ address: address }, (results, status) => {
if (status === "OK") {
resultsMap.setCenter(results[0].geometry.location);
new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location,
draggable : false
});
} else {
alert(
"Geocode was not successful for the following reason: " + status
);
}
});
}
</script>
</head>
<body>
<div id="floating-panel">
<input id="submit" type="button" value="find location" />
</div>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDK6K4iDdo9cKQdrNoOJaaYg29nEG0BIjw&callback=initMap&libraries=&v=weekly"
async
></script>
</body>
</html>
\ No newline at end of file
......@@ -27,6 +27,14 @@
</div>
<div class="form-group">
<label for="address">address</label>
<input type="text" id="address" name="address" value="<%= post.address %>" class="form-control <%= (errors.address)?'is-invalid':'' %>">
<% if(errors.address){ %>
<span class="invalid-feedback"><%= errors.address.message %></span>
<% } %>
</div>
<div class="form-group">
<textarea id="body" name="body" rows="5" class="form-control <%= (errors.body)?'is-invalid':''%>"><%= post.body %></textarea>
<% if(errors.body){ %>
<span class="invalid-feedback"><%= errors.body.message %></span>
......@@ -46,5 +54,6 @@
</form>
</div>
<%- include('../partials/gmap') %>
</body>
</html>
\ No newline at end of file
......
......@@ -17,7 +17,7 @@
</nav>
<div class="card">
<h5 class="card-header p-2"><%= post.title %></h5>
<h5 class="card-header p-2"><%= post.address %></h5>
<div class="row"> <!-- 1 -->
<div class="col-md-7 col-lg-8 col-xl-9 order-sm-2 order-md-1"> <!-- 1 -->
......@@ -48,7 +48,8 @@
</form>
<% } %>
</div>
</div>
<%- include('../partials/showgmap') %>
</body>
</html>
\ No newline at end of file
......