map.ejs
2.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!--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 : 마커만 남아있음.
-->