정지윤 / project_opensource

Go to a project
Toggle navigation Toggle navigation pinning
정지윤
1d45147a 1 parent eced1253

구글맵 API추가

Inline Side-by-side
Showing 8 changed files with 85 additions and 146 deletions
...@@ -11,8 +11,8 @@ var router = express.Router(); ...@@ -11,8 +11,8 @@ var router = express.Router();
11 // configuration =============================================================== 11 // configuration ===============================================================
12 12
13 13
14 -router.get('/jj',function(req,res){ 14 +router.get('/reservation',function(req,res){
15 - res.render('jj',{title : "첫번째 화면~"}); 15 + res.render('reservation',{title : "첫번째 화면~"});
16 }) 16 })
17 router.get('/first',function(req,res){ 17 router.get('/first',function(req,res){
18 res.render('first',{title : "첫번째 화면~"}); 18 res.render('first',{title : "첫번째 화면~"});
...@@ -27,7 +27,7 @@ router.get('/list', function(req, res){ ...@@ -27,7 +27,7 @@ router.get('/list', function(req, res){
27 }); 27 });
28 28
29 29
30 -router.post('/jj',function(req, res){ 30 +router.post('/reservation',function(req, res){
31 var creater_id = req.body.creater_id; 31 var creater_id = req.body.creater_id;
32 var phone = req.body.phone; 32 var phone = req.body.phone;
33 var email = req.body.email; 33 var email = req.body.email;
......
...@@ -13,7 +13,7 @@ var smtpTransport = nodemailer.createTransport({ ...@@ -13,7 +13,7 @@ var smtpTransport = nodemailer.createTransport({
13 13
14 var mailOptions = { 14 var mailOptions = {
15 from: '정지윤 <violet3073@gmail.com>', 15 from: '정지윤 <violet3073@gmail.com>',
16 - to: 'jju0807@naver.com', 16 + to: 'kyung__e@naver.com',
17 subject: '예약 게시판 확인해주세요!', 17 subject: '예약 게시판 확인해주세요!',
18 text: '예약이 도착했습니다' 18 text: '예약이 도착했습니다'
19 }; 19 };
......
...@@ -35,13 +35,13 @@ ...@@ -35,13 +35,13 @@
35 <div class="collapse navbar-collapse" id="navbarResponsive"> 35 <div class="collapse navbar-collapse" id="navbarResponsive">
36 <ul class="navbar-nav ml-auto"> 36 <ul class="navbar-nav ml-auto">
37 <li class="nav-item"> 37 <li class="nav-item">
38 - <a class="nav-link js-scroll-trigger" href="#about">소개</a> 38 + <a class="nav-link js-scroll-trigger" href="#about">About</a>
39 </li> 39 </li>
40 <li class="nav-item"> 40 <li class="nav-item">
41 - <a class="nav-link js-scroll-trigger" href="#download">예약</a> 41 + <a class="nav-link js-scroll-trigger" href="#download">Reservation</a>
42 </li> 42 </li>
43 <li class="nav-item"> 43 <li class="nav-item">
44 - <a class="nav-link js-scroll-trigger" href="#contact">오시는 길</a> 44 + <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
45 </li> 45 </li>
46 </ul> 46 </ul>
47 </div> 47 </div>
...@@ -93,8 +93,8 @@ ...@@ -93,8 +93,8 @@
93 <div class="container"> 93 <div class="container">
94 <div class="col-lg-8 mx-auto"> 94 <div class="col-lg-8 mx-auto">
95 <h2>Reservation</h2> 95 <h2>Reservation</h2>
96 - <p>당일 예약은 전화예약만 가능합니다.</p> 96 + <p>예약은 1주일 안에만 가능합니다.</p>
97 - <a href="/jj" class="btn btn-default btn-lg">예약하기</a> 97 + <a href="/reservation" class="btn btn-default btn-lg">예약하기</a>
98 </div> 98 </div>
99 </div> 99 </div>
100 </section> 100 </section>
...@@ -120,28 +120,91 @@ ...@@ -120,28 +120,91 @@
120 <span class="network-name">Instagram</span> 120 <span class="network-name">Instagram</span>
121 </a> 121 </a>
122 </li> 122 </li>
123 - <li class="list-inline-item">
124 - <a href="https://plus.google.com/+Startbootstrap/posts" class="btn btn-default btn-lg">
125 - <i class="fa fa-google-plus fa-fw"></i>
126 - <span class="network-name">Google+</span>
127 - </a>
128 - </li>
129 </ul> 123 </ul>
130 </div> 124 </div>
131 </div> 125 </div>
132 </div> 126 </div>
133 </section> 127 </section>
134 128
129 +
130 + <section id="contact" class="content-section text-center">
131 + <div class="container">
132 + <div class="row">
133 + <div class="col-lg-8 mx-auto">
134 + <h2>찾아오시는 길</h2>
135 + </div>
136 + </div>
137 + </div>
135 <!-- Map Section --> 138 <!-- Map Section -->
136 <div id="map"></div> 139 <div id="map"></div>
137 140
138 - <!-- Footer --> 141 + <!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
139 - <footer> 142 + <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
140 - <div class="container text-center"> 143 +
141 - <p>Copyright &copy; Your Website 2017</p> 144 + <style>
142 - </div> 145 + #map {
143 - </footer> 146 + height: 400px;
147 + width: 100%;
148 + }
149 + </style>
150 + <body>
151 + <p>경기도 수원시 영통구 영통동 1030-2</p>
152 + <section id="contact" class="content-section text-center">
153 + <div class="container">
154 + <div class="row">
155 + <div class="col-lg-8 mx-auto">
156 +
157 + </div>
158 + </div>
159 + </div>
160 + </section>
161 + <div id="map"></div>
162 + <script>
163 + function initMap() {
164 + var uluru = {lat: -25.363, lng: 131.044};
165 + var map = new google.maps.Map(document.getElementById('map'), {
166 + zoom: 4,
167 + center: uluru
168 + });
169 + var marker = new google.maps.Marker({
170 + position: uluru,
171 + map: map
172 + });
173 + }
174 + </script>
175 + <script async defer
176 + src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQobMFr9MjpbzdMVmL8qgTHLko3S00DGk&callback=initMap">
177 + </script>
178 + </body>
179 +
180 + <script>
181 + function initMap() {
182 + var cnt = 1; //마커 카운트 해서 우선 2개만 제한
183 + var initLatLng = {lat: 37.251797, lng: 127.076747};
184 + var geocoder = new google.maps.Geocoder;
185 + var map = new google.maps.Map(document.getElementById('map'), {
186 + center: initLatLng,
187 + zoom: 16
188 + });
189 + // 기본 마커 - 지도 생기면 중심에 찍혀있는 것
190 + var basicMarker = new google.maps.Marker({
191 + position: initLatLng,
192 + map: map, //map을 선택 안해주면 마커는 생성되지만 표시는 안됨 이 경우는 setmap으로 나중에 호출할 수 있음
193 + draggable: true
194 + });
195 + }
196 + </script>
197 +
198 + <!-- Footer -->
199 + <footer>
200 + <div class="container text-center">
201 + <p>Copyright &copy;정지윤 오픈소스 프로젝트</p>
202 + </div>
203 + </footer>
144 204
205 +
206 + <!-- Custom scripts for this template -->
207 + <script src="css/grayscale.min.js"></script>
145 <!-- Bootstrap core JavaScript --> 208 <!-- Bootstrap core JavaScript -->
146 <script src="vendor/jquery/jquery.min.js"></script> 209 <script src="vendor/jquery/jquery.min.js"></script>
147 <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> 210 <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
...@@ -149,12 +212,6 @@ ...@@ -149,12 +212,6 @@
149 <!-- Plugin JavaScript --> 212 <!-- Plugin JavaScript -->
150 <script src="vendor/jquery-easing/jquery.easing.min.js"></script> 213 <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
151 214
152 - <!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
153 - <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
154 -
155 - <!-- Custom scripts for this template -->
156 - <script src="css/grayscale.min.js"></script>
157 -
158 </body> 215 </body>
159 216
160 </html> 217 </html>
......
1 -<!doctype html>
2 -<html lang="en">
3 -<head>
4 - <meta charset="utf-8">
5 - <meta name="viewport" content="width=device-width, initial-scale=1">
6 - <title>jQuery UI Datepicker - Default functionality</title>
7 - <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
8 - <link rel="stylesheet" href="/resources/demos/style.css">
9 - <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
10 - <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
11 - <script>
12 - $( function() {
13 - $( "#datepicker" ).datepicker();
14 - } );
15 - </script>
16 -</head>
17 -<body>
18 -
19 -<p>Date: <input type="text" id="datepicker"></p>
20 -
21 -
22 -</body>
23 -</html>
...@@ -41,7 +41,6 @@ ...@@ -41,7 +41,6 @@
41 <div class="col-md-4 center"> 41 <div class="col-md-4 center">
42 <a href="/first" class="btn btn-default btn-lg">홈으로</a> 42 <a href="/first" class="btn btn-default btn-lg">홈으로</a>
43 </div> 43 </div>
44 - <script type="text/javascript" src="/mail"></script>
45 </head> 44 </head>
46 </html> 45 </html>
47 46
......
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
39 <form class="well form-horizontal" action=" " method="post" id="contact_form"> 39 <form class="well form-horizontal" action=" " method="post" id="contact_form">
40 <fieldset> 40 <fieldset>
41 41
42 - <form method="POST" action="/jj"> 42 + <form method="POST" action="/reservation">
43 <!-- Form Name --> 43 <!-- Form Name -->
44 44
45 <!-- Text input--> 45 <!-- Text input-->
......
1 -<!DOCTYPE html>
2 -<html>
3 -<head>
4 - <link rel = 'stylesheet' href='stylesheets/style.css'/>
5 - <meta charset = "utf-8">
6 - <meta http-equiv="X-UA-Compatible" content = "IE=edge">
7 - <meta name = "viewport" content = "width=device-width, initial-scale=1">
8 - <title><%= title %></title>
9 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
10 - <link rel = 'bootstrap' href = 'javascripts/bootstrap.js'/>
11 - <link rel = 'jquery' href = 'javascripts/jquery-3.3.1.min.js'/>
12 -</head>
13 -<body>
14 -
15 -<h1><%= title %></h1>
16 - <form method="POST" action="/write2">
17 - <table class = "table table-striped table-bordered table-hober">
18 - <thead>
19 - <tr>
20 - <td>작성자</td>
21 - <td><input type="text" name="creater_id" id="creater_id" required/></td>
22 - </tr>
23 - <tr>
24 - <td>제목</td>
25 - <td><input type="text" name="title" id="title" required/></td>
26 - </tr>
27 - <tr>
28 - <td>내용</td>
29 - <td><textarea name="content" id="content" cols="30" rows="10" required></textarea></td>
30 - </tr>
31 - <tr>
32 - <td colspan="2">
33 - <button type="submit">글쓰기</button>
34 - </td>
35 - </tr>
36 - </tbody>
37 - </table>
38 - </form>
39 -
40 -
41 -
42 -
43 -<script>
44 - function onWriteSubmit()
45 - {
46 - if ( $("#creater_id").val().trim() == "" )
47 - {
48 - var message = "아이디를 입력해 주세요";
49 - $("#creater_id").val("");
50 - $("#creater_id").focus();
51 - alert(message);
52 - return false;
53 - }
54 -
55 - if ( $("#title").val().trim() == "" )
56 - {
57 - var message = "제목을 입력해 주세요";
58 - $("#title").val("");
59 - $("#title").focus();
60 - alert(message);
61 - return false;
62 - }
63 -
64 - if ( $("#content").val().trim() == "" )
65 - {
66 - var message = "본문 내용을 입력해 주세요";
67 - $("#content").val("");
68 - $("#content").focus();
69 - alert(message);
70 - return false;
71 - }
72 -
73 -
74 - }
75 -</script>
76 -</script>
77 -<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
78 - <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
79 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
80 -
81 -</body>
82 -</html>
1 -<!DOCTYPE html>
2 -<html>
3 - <head>
4 - <title></title>
5 - <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
6 - </head>
7 - <body>
8 - <h1>Loop it!</h1>
9 - <ul>
10 - </ul>
11 - </body>
12 -</html>