-
Notifications
You must be signed in to change notification settings - Fork 0
/
daum_map.html
158 lines (141 loc) · 5.9 KB
/
daum_map.html
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyTC</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/common.css">
<!-- <link rel="stylesheet" href="./css/map.css"> -->
</head>
<style>
/* 이곳에 스타일 적용하기 */
/* 도현 작업 */
#left_tab{}
/* 어진 작업 */
#rightt_tab{}
</style>
<body>
<header>
<a href="#">MyTC</a>
<form action="#" method="POST">
<fieldset>
<legend></legend>
<select name="city">
<option value="">지역선택</option>
<option value="서울특별시">서울특별시</option>
<option value="인천광역시">인천광역시</option>
<option value="세종특별자치시">세종특별자치시</option>
<option value="대전광역시">대전광역시</option>
<option value="대구광역시">대구광역시</option>
<option value="광주광역시">광주광역시</option>
<option value="울산광역시">울산광역시</option>
<option value="부산광역시">부산광역시</option>
<option value="제주특별자치도">제주특별자치도</option>
</select>
<select name="detail_city">
<option value="">세부지역선택</option>
<option value="서울특별시">서울특별시</option>
<option value="인천광역시">인천광역시</option>
<option value="세종특별자치시">세종특별자치시</option>
<option value="대전광역시">대전광역시</option>
<option value="대구광역시">대구광역시</option>
<option value="광주광역시">광주광역시</option>
<option value="울산광역시">울산광역시</option>
<option value="부산광역시">부산광역시</option>
<option value="제주특별자치도">제주특별자치도</option>
</select>
<input type="submit">
</fieldset>
</form>
<button type="button">
<img src="./assets/user.png" alt="user">
</button>
</header>
<main>
<!-- 왼쪽 탭 section -->
<section id="left_tab">
<h2><span>제주특별자치도 /</span><span>서귀포시</span>검색결과</h2>
<h3>추천코스</h3>
<ol>
<li>서우봉 - 비자림 - 성산일출봉
<button type="button">담기</button>
</li>
<li>우도 - 함덕해수욕 - 용두암
<button type="button">담기</button>
</li>
<li>쇠소깍 - 섭지코지 - 카멜리아힐
<button type="button">담기</button>
</li>
</ol>
</section>
<!-- 지도 section -->
<section>
<div id="map" style="width:100%;height:350px;"></div>
</section>
<!-- 오른쪽 탭 section -->
<section id="right_tab">
<h2>My Course</h2>
<button type="button">…</button>
<div>
<button type="button">편집</button>
<button type="button">이름수정</button>
</div>
<ol>
<li>
<h3>힐링</h3>
<ol>
<li></li>
</ol>
</li>
<li>
<h3>먹부림</h3>
<ol>
<li></li>
</ol>
</li>
<li>
<h3>물놀이</h3>
<ol>
<li></li>
</ol>
</li>
<li>
<h3>새코스1</h3>
<ol>
<li>쇠소깍</li>
<li>섭지코지</li>
<li>카멜리아힐</li>
</ol>
</li>
</ol>
</section>
</main>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=6ff60a456b3bef3824da4c0d06a5df7b"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
var iwContent = '<div style="padding:5px;">Hello World! <br><a href="https://map.kakao.com/link/map/Hello World!,33.450701,126.570667" style="color:blue" target="_blank">큰지도보기</a> <a href="https://map.kakao.com/link/to/Hello World!,33.450701,126.570667" style="color:blue" target="_blank">길찾기</a></div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwPosition = new kakao.maps.LatLng(33.450701, 126.570667); //인포윈도우 표시 위치입니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
position : iwPosition,
content : iwContent
});
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
infowindow.open(map, marker);
</script>
</body>
</html>