김동훈 / OpenSource_Project

Go to a project
Toggle navigation Toggle navigation pinning
전수민
06e971b5 1 parent 0d3b0504

font link

Inline Side-by-side
Showing 4 changed files with 268 additions and 194 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 3
4 - <head> 4 +<head>
5 5
6 - <meta charset="utf-8"> 6 + <meta charset="utf-8">
7 - <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9 - <meta name="description" content=""> 9 + <meta name="description" content="">
10 - <meta name="author" content=""> 10 + <meta name="author" content="">
11 - 11 +
12 - <title>저기어때</title> 12 + <title>저기어때</title>
13 - 13 +
14 - <!-- Bootstrap core CSS--> 14 + <!-- Bootstrap core CSS-->
15 - <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 15 + <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
16 - 16 +
17 - <!-- Custom fonts for this template--> 17 + <!-- Custom fonts for this template-->
18 - <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> 18 + <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
19 - 19 +
20 - <!-- Page level plugin CSS--> 20 + <!-- Page level plugin CSS-->
21 - <link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet"> 21 + <link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
22 - 22 +
23 - <!-- Custom styles for this template--> 23 + <!-- Custom styles for this template-->
24 - <link href="css/sb-admin.css" rel="stylesheet"> 24 + <link href="css/sb-admin.css" rel="stylesheet">
25 - 25 +
26 - </head> 26 + <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&amp;subset=korean" rel="stylesheet">
27 - 27 +
28 - <body id="page-top"> 28 +</head>
29 - 29 +
30 - <nav class="navbar navbar-expand navbar-dark bg-dark static-top"> 30 +<body id="page-top">
31 - 31 +
32 - <a class="navbar-brand mr-1" href="index.html">저기어때</a> 32 + <nav class="navbar navbar-expand navbar-dark bg-dark static-top">
33 - 33 +
34 - <button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#"> 34 + <a class="navbar-brand mr-1" href="index.html">저기어때</a>
35 - <i class="fas fa-bars"></i> 35 +
36 - </button> 36 + <button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
37 - 37 + <i class="fas fa-bars"></i>
38 - </nav> 38 + </button>
39 - 39 +
40 - <div id="wrapper"> 40 + </nav>
41 - 41 +
42 - <!-- Sidebar --> 42 + <div id="wrapper">
43 - <ul class="sidebar navbar-nav"> 43 +
44 - 44 + <!-- Sidebar -->
45 - <li class="nav-item"> 45 + <ul class="sidebar navbar-nav">
46 - <a class="nav-link" href="index.html">
47 - <i class="fas fa-map-marker"></i>
48 - <span>Map</span>
49 - </a>
50 - </li>
51 -
52 - <li class="nav-item">
53 - <a class="nav-link" href="Foods.html">
54 - <i class="fas fa-utensils" area-hidden ="true"></i>
55 - <span>Foods</span>
56 - </a>
57 - </li>
58 -
59 - <li class="nav-item active">
60 - <a class="nav-link" href="Entertainment.html">
61 - <i class="fas fa-gamepad"></i>
62 - <span>Entertainment</span>
63 - </a>
64 - </li>
65 -
66 - <li class="nav-item">
67 - <a class="nav-link" href="Rooms.html">
68 - <i class="fas fa-bed"></i>
69 - <span>Rooms</span>
70 - </a>
71 - </li>
72 -
73 -
74 - </ul>
75 - <div id="content-wrapper">
76 -
77 - <div class="container-fluid">
78 -
79 - <!-- Breadcrumbs-->
80 - <ol class="breadcrumb">
81 - <li class="breadcrumb-item">
82 - <a href="#">Entertainment</a>
83 - </li>
84 -
85 - </ol>
86 -
87 - <script>
88 - var result_entertainment = []
89 - </script>
90 - <script type="text/javascript" src="/js/showEnt.js"></script>
91 - <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDg4CkUEEt_96n1ork1nL5t4E_SpdKrgMI&libraries=places&callback=initMap" async defer></script>
92 -
93 - <!-- Icon Cards-->
94 - <div class="row">
95 - <div class="col-xl-3 col-sm-6 mb-3">
96 - <div class="card text-white bg-primary o-hidden h-100">
97 - <div class="card-body">
98 - <div class="card-body-icon">
99 - <i class="fas fa-fw fa-comments"></i>
100 - </div>
101 - <div class="mr-5">26 New Messages!</div>
102 - </div>
103 - <a class="card-footer text-white clearfix small z-1" href="#">
104 - <span class="float-left">View Details</span>
105 - <span class="float-right">
106 - <i class="fas fa-angle-right"></i>
107 - </span>
108 - </a>
109 - </div>
110 - </div>
111 - <div class="col-xl-3 col-sm-6 mb-3">
112 - <div class="card text-white bg-warning o-hidden h-100">
113 - <div class="card-body">
114 - <div class="card-body-icon">
115 - <i class="fas fa-fw fa-list"></i>
116 - </div>
117 - <div class="mr-5">11 New Tasks!</div>
118 - </div>
119 - <a class="card-footer text-white clearfix small z-1" href="#">
120 - <span class="float-left">View Details</span>
121 - <span class="float-right">
122 - <i class="fas fa-angle-right"></i>
123 - </span>
124 - </a>
125 - </div>
126 - </div>
127 - <div class="col-xl-3 col-sm-6 mb-3">
128 - <div class="card text-white bg-success o-hidden h-100">
129 - <div class="card-body">
130 - <div class="card-body-icon">
131 - <i class="fas fa-fw fa-shopping-cart"></i>
132 - </div>
133 - <div class="mr-5">123 New Orders!</div>
134 - </div>
135 - <a class="card-footer text-white clearfix small z-1" href="#">
136 - <span class="float-left">View Details</span>
137 - <span class="float-right">
138 - <i class="fas fa-angle-right"></i>
139 - </span>
140 - </a>
141 - </div>
142 - </div>
143 - <div class="col-xl-3 col-sm-6 mb-3">
144 - <div class="card text-white bg-danger o-hidden h-100">
145 - <div class="card-body">
146 - <div class="card-body-icon">
147 - <i class="fas fa-fw fa-life-ring"></i>
148 - </div>
149 - <div class="mr-5">13 New Tickets!</div>
150 - </div>
151 - <a class="card-footer text-white clearfix small z-1" href="#">
152 - <span class="float-left">View Details</span>
153 - <span class="float-right">
154 - <i class="fas fa-angle-right"></i>
155 - </span>
156 - </a>
157 - </div>
158 - </div>
159 - </div>
160 46
161 - <p class="small text-center text-muted my-5"> 47 + <li class="nav-item">
162 - <em>More chart examples coming soon...</em> 48 + <a class="nav-link" href="index.html">
163 - </p> 49 + <i class="fas fa-map-marker"></i>
50 + <span>Map</span>
51 + </a>
52 + </li>
164 53
54 + <li class="nav-item">
55 + <a class="nav-link" href="Foods.html">
56 + <i class="fas fa-utensils" area-hidden="true"></i>
57 + <span>Foods</span>
58 + </a>
59 + </li>
60 +
61 + <li class="nav-item active">
62 + <a class="nav-link" href="Entertainment.html">
63 + <i class="fas fa-gamepad"></i>
64 + <span>Entertainment</span>
65 + </a>
66 + </li>
67 +
68 + <li class="nav-item">
69 + <a class="nav-link" href="Rooms.html">
70 + <i class="fas fa-bed"></i>
71 + <span>Rooms</span>
72 + </a>
73 + </li>
74 +
75 +
76 + </ul>
77 + <div id="content-wrapper">
78 +
79 + <div class="container-fluid">
80 +
81 + <!-- Breadcrumbs-->
82 + <ol class="breadcrumb">
83 + <li class="breadcrumb-item">
84 + <a href="#">Entertainment</a>
85 + </li>
86 +
87 + </ol>
88 +
89 + <!-- Icon Cards-->
90 + <div class="row" id="cardBody">
165 </div> 91 </div>
166 - <!-- /.container-fluid --> 92 +
167 - 93 + <!-- <script>
168 - <!-- Sticky Footer --> 94 + var result_entertainment = []
169 - <footer class="sticky-footer"> 95 + </script> -->
170 - <div class="container my-auto"> 96 + <script>
171 - <div class="copyright text-center my-auto"> 97 + var result_entertainment = []
172 - <span>Copyright © Your Website 2018</span> 98 + var entName = '';
173 - </div> 99 + var entType = '';
174 - </div> 100 + var card = '';
175 - </footer> 101 +
102 + var map;
103 + var service;
104 +
105 + function initMap() {
106 + // Try HTML5 geolocation.
107 + if (navigator.geolocation) {
108 + navigator.geolocation.getCurrentPosition(function (position) {
109 + pos = {
110 + lat: position.coords.latitude,
111 + lng: position.coords.longitude
112 + };
113 +
114 + map = new google.maps.Map(document.getElementById('map'), {
115 + center: pos,
116 + zoom: 17
117 + });
118 +
119 + map.setCenter(pos);
120 +
121 + service = new google.maps.places.PlacesService(map);
122 +
123 + searchPlace('department_store', 'entertainment');
124 + searchPlace('movie_theater', 'entertainment');
125 + searchPlace('museum', 'entertainment');
126 + searchPlace('night_club', 'entertainment');
127 + searchPlace('shopping_mall', 'entertainment');
128 + searchPlace('zoo', 'entertainment');
129 + });
130 + }
131 + }
132 +
133 + async function searchPlace(str, placeType) {
134 + switch (placeType) {
135 + case 'food':
136 + service.nearbySearch({
137 + location: pos,
138 + radius: 500,
139 + type: [str]
140 + }, await callback_foods);
141 + break;
142 + case 'entertainment':
143 + service.nearbySearch({
144 + location: pos,
145 + radius: 500,
146 + type: [str]
147 + }, await callback_entertainment);
148 + break;
149 + case 'room':
150 + service.nearbySearch({
151 + location: pos,
152 + radius: 500,
153 + type: [str]
154 + }, await callback_rooms);
155 + break;
156 + default:
157 + break;
158 + }
159 + }
160 +
161 + function callback_entertainment(results, status) {
162 + if (status === google.maps.places.PlacesServiceStatus.OK) {
163 + for (var i = 0; i < results.length; i++) {
164 + console.log(results[i]);
165 + result_entertainment.push(results[i])
166 + }
167 + }
168 + }
169 +
170 + // const id = result['id'];
171 + // const place_id =result['place_id'];
172 + // const name = result['name'];
173 + // const address = result['vicinity'];
174 + // let category_big = category1
175 + // const category_small = result.types[0];
176 + // const image = "default"
177 + // const rating = result.rating;
178 + // const lng = result.geometry.viewport.ea.j;
179 + // const lat =result.geometry.viewport.la.j;
180 +
181 + setTimeout(function(){
182 + for (var i = 0; i < result_entertainment.length; i++) {
183 + entName = result_entertainment[i][name];
184 + entType = "result_entertainment[i][types];"
185 +
186 + var tmp = '<div class="col-xl-6 col-sm-6 mb-3">' +
187 + '<div class="card text-white bg-light o-hidden h-100">' +
188 + '<div class="card-body"' + ' style="height:350px; background-image:url(' + "'entertainment.jpg'" + '); background-size: 100% 100%; background-repeat: no-repeat;">' + // place photo
189 + '<div class="mr-5" id="nameDiv">'+entName+'</div>'+ // place name
190 + '<div class="mr-5" id="typeDiv">'+entType+'</div>'+ // place type
191 + '</div>' +
192 + '</div>' +
193 + '</div>';
194 + card+=tmp;
195 + }
196 + }, 5000);
197 +
198 + document.getElementById("cardBody").innerHTML = card;
199 +
200 + </script>
201 +
202 + <div id="map"></div>
203 + <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDg4CkUEEt_96n1ork1nL5t4E_SpdKrgMI&libraries=places&callback=initMap"
204 + async defer></script>
176 205
177 </div> 206 </div>
178 - <!-- /.content-wrapper --> 207 + <!-- /.container-fluid -->
208 +
209 + <!-- Sticky Footer -->
210 + <footer class="sticky-footer">
211 + <div class="container my-auto">
212 + <div class="copyright text-center my-auto">
213 + <span>Copyright © Your Website 2018</span>
214 + </div>
215 + </div>
216 + </footer>
179 217
180 </div> 218 </div>
181 - <!-- /#wrapper --> 219 + <!-- /.content-wrapper -->
220 +
221 + </div>
222 + <!-- /#wrapper -->
182 223
183 - <!-- Scroll to Top Button--> 224 + <!-- Scroll to Top Button-->
184 - <a class="scroll-to-top rounded" href="#page-top"> 225 + <a class="scroll-to-top rounded" href="#page-top">
185 - <i class="fas fa-angle-up"></i> 226 + <i class="fas fa-angle-up"></i>
186 - </a> 227 + </a>
187 228
188 229
189 230
190 - <!-- Bootstrap core JavaScript--> 231 + <!-- Bootstrap core JavaScript-->
191 - <script src="vendor/jquery/jquery.min.js"></script> 232 + <script src="vendor/jquery/jquery.min.js"></script>
192 - <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> 233 + <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
193 234
194 - <!-- Core plugin JavaScript--> 235 + <!-- Core plugin JavaScript-->
195 - <script src="vendor/jquery-easing/jquery.easing.min.js"></script> 236 + <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
196 237
197 - <!-- Page level plugin JavaScript--> 238 + <!-- Page level plugin JavaScript-->
198 - <script src="vendor/chart.js/Chart.min.js"></script> 239 + <script src="vendor/chart.js/Chart.min.js"></script>
199 240
200 - <!-- Custom scripts for all pages--> 241 + <!-- Custom scripts for all pages-->
201 - <script src="js/sb-admin.min.js"></script> 242 + <script src="js/sb-admin.min.js"></script>
202 243
203 - <!-- Demo scripts for this page--> 244 + <!-- Demo scripts for this page-->
204 - <script src="js/demo/chart-area-demo.js"></script> 245 + <script src="js/demo/chart-area-demo.js"></script>
205 - <script src="js/demo/chart-bar-demo.js"></script> 246 + <script src="js/demo/chart-bar-demo.js"></script>
206 - <script src="js/demo/chart-pie-demo.js"></script> 247 + <script src="js/demo/chart-pie-demo.js"></script>
207 248
208 - </body> 249 +</body>
209 250
210 -</html> 251 +</html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -23,6 +23,8 @@ ...@@ -23,6 +23,8 @@
23 <!-- Custom styles for this template--> 23 <!-- Custom styles for this template-->
24 <link href="css/sb-admin.css" rel="stylesheet"> 24 <link href="css/sb-admin.css" rel="stylesheet">
25 25
26 + <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&amp;subset=korean" rel="stylesheet">
27 +
26 </head> 28 </head>
27 29
28 <body id="page-top"> 30 <body id="page-top">
......
1 +var entName = '';
2 +var entType = '';
3 +var entPhoto = '';
4 +var card = '';
5 +
1 function initMap() { 6 function initMap() {
2 // Try HTML5 geolocation. 7 // Try HTML5 geolocation.
3 if (navigator.geolocation) { 8 if (navigator.geolocation) {
...@@ -17,28 +22,28 @@ function initMap() { ...@@ -17,28 +22,28 @@ function initMap() {
17 } 22 }
18 } 23 }
19 24
20 -function searchPlace(str, placeType) { 25 +async function searchPlace(str, placeType) {
21 switch(placeType) { 26 switch(placeType) {
22 case 'food': 27 case 'food':
23 service.nearbySearch({ 28 service.nearbySearch({
24 location: pos, 29 location: pos,
25 radius: 500, 30 radius: 500,
26 type: [str] 31 type: [str]
27 - }, callback_foods); 32 + }, await callback_foods);
28 break; 33 break;
29 case 'entertainment': 34 case 'entertainment':
30 service.nearbySearch({ 35 service.nearbySearch({
31 location: pos, 36 location: pos,
32 radius: 500, 37 radius: 500,
33 type: [str] 38 type: [str]
34 - }, callback_entertainment); 39 + }, await callback_entertainment);
35 break; 40 break;
36 case 'room': 41 case 'room':
37 service.nearbySearch({ 42 service.nearbySearch({
38 location: pos, 43 location: pos,
39 radius: 500, 44 radius: 500,
40 type: [str] 45 type: [str]
41 - }, callback_rooms); 46 + }, await callback_rooms);
42 break; 47 break;
43 default: 48 default:
44 break; 49 break;
...@@ -48,6 +53,7 @@ function searchPlace(str, placeType) { ...@@ -48,6 +53,7 @@ function searchPlace(str, placeType) {
48 function callback_entertainment(results, status) { 53 function callback_entertainment(results, status) {
49 if (status === google.maps.places.PlacesServiceStatus.OK) { 54 if (status === google.maps.places.PlacesServiceStatus.OK) {
50 for (var i = 0; i < results.length; i++) { 55 for (var i = 0; i < results.length; i++) {
56 + console.log(results[i]);
51 result_entertainment.push(result[i]) 57 result_entertainment.push(result[i])
52 } 58 }
53 } 59 }
...@@ -62,4 +68,29 @@ function callback_entertainment(results, status) { ...@@ -62,4 +68,29 @@ function callback_entertainment(results, status) {
62 // const image = "default" 68 // const image = "default"
63 // const rating = result.rating; 69 // const rating = result.rating;
64 // const lng = result.geometry.viewport.ea.j; 70 // const lng = result.geometry.viewport.ea.j;
65 - const lat =result.geometry.viewport.la.j; 71 + // const lat =result.geometry.viewport.la.j;
72 +
73 +
74 +for(var i=0; i<entList.size(); i++){
75 + entName = result_entertainment[i][name];
76 + entType = result_entertainment[i][category];
77 + // if(result_entertainment[i][photo]==undefined){
78 + // entPhoto = "noimage.png";
79 + // }
80 + // else{
81 + // entPhoto = entList[i][photo];
82 + }
83 +
84 + var tmp = '<div class="col-xl-6 col-sm-6 mb-3">'+
85 + '<div class="card text-white bg-light o-hidden h-100">'+
86 + '<div class="card-body"' + ' style="height:350px; background-image:url(' + "'2.jpg'" + '); background-size: 100% 100%; background-repeat: no-repeat;">' + // place photo
87 + // '<div class="mr-5" id="nameDiv">'+entName+'</div>'+ // place name
88 + // '<div class="mr-5" id="typeDiv">'+entType+'</div>'+ // place type
89 + '<div class="mr-5" id="nameDiv">가게이름</div>'+ // place name
90 + '<div class="mr-5" id="typeDiv">타입</div>'+ // place type
91 + '</div>'+
92 + '</div>'+
93 + '</div>';
94 + //card+=tmp;
95 +
96 +document.getElementById("cardBody").innerHTML=tmp;
...\ No newline at end of file ...\ No newline at end of file
......