정지윤 / 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 80 additions and 141 deletions
......@@ -11,8 +11,8 @@ var router = express.Router();
// configuration ===============================================================
router.get('/jj',function(req,res){
res.render('jj',{title : "첫번째 화면~"});
router.get('/reservation',function(req,res){
res.render('reservation',{title : "첫번째 화면~"});
})
router.get('/first',function(req,res){
res.render('first',{title : "첫번째 화면~"});
......@@ -27,7 +27,7 @@ router.get('/list', function(req, res){
});
router.post('/jj',function(req, res){
router.post('/reservation',function(req, res){
var creater_id = req.body.creater_id;
var phone = req.body.phone;
var email = req.body.email;
......
......@@ -13,7 +13,7 @@ var smtpTransport = nodemailer.createTransport({
var mailOptions = {
from: '정지윤 <violet3073@gmail.com>',
to: 'jju0807@naver.com',
to: 'kyung__e@naver.com',
subject: '예약 게시판 확인해주세요!',
text: '예약이 도착했습니다'
};
......
......@@ -35,13 +35,13 @@
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">소개</a>
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#download">예약</a>
<a class="nav-link js-scroll-trigger" href="#download">Reservation</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">오시는 길</a>
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
......@@ -93,8 +93,8 @@
<div class="container">
<div class="col-lg-8 mx-auto">
<h2>Reservation</h2>
<p>당일 예약은 전화예약만 가능합니다.</p>
<a href="/jj" class="btn btn-default btn-lg">예약하기</a>
<p>예약은 1주일 안에만 가능합니다.</p>
<a href="/reservation" class="btn btn-default btn-lg">예약하기</a>
</div>
</div>
</section>
......@@ -120,28 +120,91 @@
<span class="network-name">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://plus.google.com/+Startbootstrap/posts" class="btn btn-default btn-lg">
<i class="fa fa-google-plus fa-fw"></i>
<span class="network-name">Google+</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="contact" class="content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>찾아오시는 길</h2>
</div>
</div>
</div>
<!-- Map Section -->
<div id="map"></div>
<!-- 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/ -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
<body>
<p>경기도 수원시 영통구 영통동 1030-2</p>
<section id="contact" class="content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
</div>
</div>
</div>
</section>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQobMFr9MjpbzdMVmL8qgTHLko3S00DGk&callback=initMap">
</script>
</body>
<script>
function initMap() {
var cnt = 1; //마커 카운트 해서 우선 2개만 제한
var initLatLng = {lat: 37.251797, lng: 127.076747};
var geocoder = new google.maps.Geocoder;
var map = new google.maps.Map(document.getElementById('map'), {
center: initLatLng,
zoom: 16
});
// 기본 마커 - 지도 생기면 중심에 찍혀있는 것
var basicMarker = new google.maps.Marker({
position: initLatLng,
map: map, //map을 선택 안해주면 마커는 생성되지만 표시는 안됨 이 경우는 setmap으로 나중에 호출할 수 있음
draggable: true
});
}
</script>
<!-- Footer -->
<footer>
<div class="container text-center">
<p>Copyright &copy; Your Website 2017</p>
<p>Copyright &copy;정지윤 오픈소스 프로젝트</p>
</div>
</footer>
<!-- Custom scripts for this template -->
<script src="css/grayscale.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
......@@ -149,12 +212,6 @@
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- 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/ -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
<!-- Custom scripts for this template -->
<script src="css/grayscale.min.js"></script>
</body>
</html>
......
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
......@@ -41,7 +41,6 @@
<div class="col-md-4 center">
<a href="/first" class="btn btn-default btn-lg">홈으로</a>
</div>
<script type="text/javascript" src="/mail"></script>
</head>
</html>
......
......@@ -39,7 +39,7 @@
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<fieldset>
<form method="POST" action="/jj">
<form method="POST" action="/reservation">
<!-- Form Name -->
<!-- Text input-->
......
<!DOCTYPE html>
<html>
<head>
<link rel = 'stylesheet' href='stylesheets/style.css'/>
<meta charset = "utf-8">
<meta http-equiv="X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title><%= title %></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel = 'bootstrap' href = 'javascripts/bootstrap.js'/>
<link rel = 'jquery' href = 'javascripts/jquery-3.3.1.min.js'/>
</head>
<body>
<h1><%= title %></h1>
<form method="POST" action="/write2">
<table class = "table table-striped table-bordered table-hober">
<thead>
<tr>
<td>작성자</td>
<td><input type="text" name="creater_id" id="creater_id" required/></td>
</tr>
<tr>
<td>제목</td>
<td><input type="text" name="title" id="title" required/></td>
</tr>
<tr>
<td>내용</td>
<td><textarea name="content" id="content" cols="30" rows="10" required></textarea></td>
</tr>
<tr>
<td colspan="2">
<button type="submit">글쓰기</button>
</td>
</tr>
</tbody>
</table>
</form>
<script>
function onWriteSubmit()
{
if ( $("#creater_id").val().trim() == "" )
{
var message = "아이디를 입력해 주세요";
$("#creater_id").val("");
$("#creater_id").focus();
alert(message);
return false;
}
if ( $("#title").val().trim() == "" )
{
var message = "제목을 입력해 주세요";
$("#title").val("");
$("#title").focus();
alert(message);
return false;
}
if ( $("#content").val().trim() == "" )
{
var message = "본문 내용을 입력해 주세요";
$("#content").val("");
$("#content").focus();
alert(message);
return false;
}
}
</script>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
<h1>Loop it!</h1>
<ul>
</ul>
</body>
</html>