임태민 / Mapmory

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

Revert "Update project directory" 

This reverts commit cbb52dd8.
Expand all
Inline Side-by-side
Showing 8 changed files with 3 additions and 113 deletions
......@@ -6,8 +6,6 @@ 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},
});
......
This diff is collapsed. Click to expand it.
......@@ -17,7 +17,7 @@
"express": "^4.17.1",
"express-session": "^1.17.1",
"method-override": "^3.0.0",
"mongoose": "^5.12.10",
"mongoose": "^5.12.8",
"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,13 +49,5 @@
</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,20 +39,12 @@
</div>
<% } %>
<div>
<a class="btn btn-primary" href="/posts">Back</a>
<button type="submit" class="btn btn-primary">Submit</button>
</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>
</div>
</body>
</html>
\ No newline at end of file
......
......@@ -50,9 +50,5 @@
</div>
</div>
<!--map추가 code 시작.-->
<%- include('../partials/map') %>
<div id="map"></div>
<!--map추가 code끝-->
</body>
</html>
\ No newline at end of file
......