김동훈 / OpenSource_Project

Go to a project
Toggle navigation Toggle navigation pinning
김다솜
334a5808 1 parent a8a03da8

add list

Inline Side-by-side
Showing 5 changed files with 451 additions and 204 deletions
......@@ -9,7 +9,7 @@
<meta name="description" content="">
<meta name="author" content="">
<title>저기어때</title>
<title>뭐라도해</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
......@@ -31,7 +31,7 @@
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
<a class="navbar-brand mr-1" href="index.html">저기어때</a>
<a class="navbar-brand mr-1" href="index.html">뭐라도해</a>
<button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
<i class="fas fa-bars"></i>
......@@ -102,7 +102,7 @@
var map;
var service;
var _length =0;
var _temp = 0;
var check = 0;
function initMap() {
// Try HTML5 geolocation.
......@@ -128,7 +128,7 @@
searchPlace('night_club', 'entertainment');
searchPlace('shopping_mall', 'entertainment');
searchPlace('zoo', 'entertainment');
if (_temp ==5)
if (check ==1)
makecard(_length);
});
}
......@@ -169,17 +169,19 @@
result_entertainment.push(results[i]);
_length +=1;
console.log(_length);
if (_length ==2)
if (i ==results.length-1)
makecard(_length);
//console.log(result_entertainment[i]);
_temp = 5;
check =1;
}
}
}
function makecard(_length)
{
console.log("make")
console.log("make");
console.log(_length);
for(var i =0;i<_length;i++)
{
//console.log(result_entertainment[i]);
......@@ -196,7 +198,8 @@
'</div>';
//card+=tmp;
console.log(tmp);
document.getElementById("cardBody").innerHTML = tmp;
card +=tmp;
document.getElementById("cardBody").innerHTML = card;
}
}
......@@ -270,25 +273,6 @@
</a>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="vendor/chart.js/Chart.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<!-- Demo scripts for this page-->
<script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-bar-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
</body>
</html>
\ No newline at end of file
......
......@@ -9,7 +9,7 @@
<meta name="description" content="">
<meta name="author" content="">
<title>저기어때</title>
<title>뭐라도해</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
......@@ -31,7 +31,7 @@
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
<a class="navbar-brand mr-1" href="index.html">저기어때</a>
<a class="navbar-brand mr-1" href="index.html">뭐라도해</a>
<button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
<i class="fas fa-bars"></i>
......@@ -75,61 +75,164 @@
</ul>
<div id="content-wrapper">
<div class="container-fluid">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Foods</a>
</li>
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Foods</a>
</li>
</ol>
<!-- Icon Cards-->
<div class="row" id="body">
<script src="js/showFood.js"></script>
</div>
</ol>
<!-- Icon Cards-->
<div class="row" id="cardBody">
</div>
<!-- /.container-fluid -->
<!-- Sticky Footer -->
<footer class="sticky-footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2018</span>
</div>
</div>
</footer>
<script>
var result_food = [];
</script>
<script>
var entName = '';
var entType = '';
var card = '';
var map;
var service;
var _length =0;
var check = 0;
function initMap() {
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 17
});
map.setCenter(pos);
service = new google.maps.places.PlacesService(map);
searchPlace('bar','food');
searchPlace('cafe','food');
searchPlace('meal_delivery','food');
searchPlace('meal_takeaway','food');
searchPlace('restaurant','food');
searchPlace('bakery','food');
if (check ==1)
makecard(_length);
});
}
}
function searchPlace(str, placeType) {
switch (placeType) {
case 'food':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_foods);
break;
case 'entertainment':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_entertainment);
break;
case 'room':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_rooms);
break;
default:
break;
}
}
function callback_foods(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
//console.log(results[i]);
result_food.push(results[i]);
_length +=1;
console.log(_length);
if (i ==results.length-1)
makecard(_length);
//console.log(result_entertainment[i]);
check = 1;
}
}
}
function makecard(_length)
{
console.log("make");
console.log(_length);
for(var i =0;i<_length;i++)
{
entName = result_food[i].name;
console.log(entName);
var tmp = '<div class="col-xl-6 col-sm-6 mb-3">' +
'<div class="card text-white bg-light o-hidden h-100">' +
'<div class="card-body"' + ' style="height:350px; background-image:url(' + "'entertainment.jpg'" + '); background-size: 100% 100%; background-repeat: no-repeat;">' + // place photo
'<div class="mr-5" id="nameDiv">'+entName+'</div>'+ // place name
//'<div class="mr-5" id="typeDiv">'+entType+'</div>'+ // place type
'</div>' +
'</div>' +
'</div>';
//card+=tmp;
console.log(tmp);
card +=tmp;
document.getElementById("cardBody").innerHTML = card;
}
}
</script>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDg4CkUEEt_96n1ork1nL5t4E_SpdKrgMI&libraries=places&callback=initMap"
async defer></script>
<p class="small text-center text-muted my-5">
<em>More chart examples coming soon...</em>
</p>
</div>
<!-- /.content-wrapper -->
<!-- /.container-fluid -->
<!-- Sticky Footer -->
<footer class="sticky-footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2018</span>
</div>
</div>
</footer>
</div>
<!-- /#wrapper -->
<!-- /.content-wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="vendor/chart.js/Chart.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<!-- Demo scripts for this page-->
<script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-bar-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
</body>
......
......@@ -31,7 +31,7 @@
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
<a class="navbar-brand mr-1" href="index.html">저기어때</a>
<a class="navbar-brand mr-1" href="index.html">뭐라도해</a>
<button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
<i class="fas fa-bars"></i>
......@@ -76,131 +76,163 @@
</ul>
<div id="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Rooms</a>
</li>
</ol>
<!-- Icon Cards-->
<div class="row">
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-primary o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-comments"></i>
</div>
<div class="mr-5">26 New Messages!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fas fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-warning o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-list"></i>
</div>
<div class="mr-5">11 New Tasks!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fas fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-success o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-shopping-cart"></i>
</div>
<div class="mr-5">123 New Orders!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fas fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-danger o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-life-ring"></i>
</div>
<div class="mr-5">13 New Tickets!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fas fa-angle-right"></i>
</span>
</a>
</div>
</div>
</div>
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Rooms</a>
</li>
<p class="small text-center text-muted my-5">
<em>More chart examples coming soon...</em>
</p>
</ol>
<!-- Icon Cards-->
<div class="row" id="cardBody">
</div>
<!-- /.container-fluid -->
<!-- Sticky Footer -->
<footer class="sticky-footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2018</span>
</div>
</div>
</footer>
<script>
var result_rooms = [];
</script>
<script>
var entName = '';
var entType = '';
var card = '';
var map;
var service;
var _length =0;
var check = 0;
function initMap() {
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 17
});
map.setCenter(pos);
service = new google.maps.places.PlacesService(map);
searchPlace('lodging','room');
// if (check ==1)
// makecard(_length);
});
}
}
function searchPlace(str, placeType) {
switch (placeType) {
case 'food':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_foods);
break;
case 'entertainment':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_entertainment);
break;
case 'room':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_rooms);
break;
default:
break;
}
}
function callback_rooms(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
//console.log(results[i]);
result_rooms.push(results[i]);
_length +=1;
console.log(_length);
if (i ==results.length-1)
makecard(_length);
//console.log(result_entertainment[i]);
check =1;
}
}
}
function makecard(_length)
{
console.log("make");
console.log(_length);
for(var i =0;i<_length;i++)
{
entName = result_rooms[i].name;
console.log(entName);
var tmp = '<div class="col-xl-6 col-sm-6 mb-3">' +
'<div class="card text-white bg-light o-hidden h-100">' +
'<div class="card-body"' + ' style="height:350px; background-image:url(' + "'entertainment.jpg'" + '); background-size: 100% 100%; background-repeat: no-repeat;">' + // place photo
'<div class="mr-5" id="nameDiv">'+entName+'</div>'+ // place name
//'<div class="mr-5" id="typeDiv">'+entType+'</div>'+ // place type
'</div>' +
'</div>' +
'</div>';
//card+=tmp;
console.log(tmp);
card +=tmp;
document.getElementById("cardBody").innerHTML = card;
}
}
</script>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDg4CkUEEt_96n1ork1nL5t4E_SpdKrgMI&libraries=places&callback=initMap"
async defer></script>
<p class="small text-center text-muted my-5">
<em>More chart examples coming soon...</em>
</p>
</div>
<!-- /.content-wrapper -->
<!-- /.container-fluid -->
<!-- Sticky Footer -->
<footer class="sticky-footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2018</span>
</div>
</div>
</footer>
</div>
<!-- /#wrapper -->
<!-- /.content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="vendor/chart.js/Chart.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<!-- Demo scripts for this page-->
<script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-bar-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
</body>
</html>
......
......@@ -9,7 +9,7 @@
<meta name="description" content="">
<meta name="author" content="">
<title>저기어때</title>
<title>뭐라도해</title>
<style>
/* Always set the map height explicitly to define the size of the div
......@@ -43,7 +43,7 @@
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
<a class="navbar-brand mr-1" href="index.html">저기어때</a>
<a class="navbar-brand mr-1" href="index.html">뭐라도해</a>
<button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
<i class="fas fa-bars"></i>
......@@ -93,7 +93,7 @@
var result_food = []
var result_room = []
</script>
<script type="text/javascript" src="/js/getPlaceList.js"></script>
<script type="text/javascript" src="./js/getPlaceList.js"></script>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDg4CkUEEt_96n1ork1nL5t4E_SpdKrgMI&libraries=places&callback=initMap" async defer></script>
......@@ -133,24 +133,6 @@
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Page level plugin JavaScript-->
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/datatables/jquery.dataTables.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<!-- Demo scripts for this page-->
<script src="js/demo/datatables-demo.js"></script>
<script src="js/demo/chart-area-demo.js"></script>
</body>
......
var pos;
var map;
var infowindow;
var service;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 17
});
infowindow = new google.maps.InfoWindow();
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 17
});
infowindow = new google.maps.InfoWindow();
map.setCenter(pos);
service = new google.maps.places.PlacesService(map);
searchPlace('bar','food');
searchPlace('cafe','food');
searchPlace('meal_delivery','food');
searchPlace('meal_takeaway','food');
searchPlace('restaurant','food');
searchPlace('bakery','food');
searchPlace('department_store','entertainment');
searchPlace('movie_theater','entertainment');
searchPlace('museum','entertainment');
searchPlace('night_club','entertainment');
searchPlace('shopping_mall','entertainment');
searchPlace('zoo','entertainment');
searchPlace('lodging','room');
});
}
}
function searchPlace(str, placeType) {
switch(placeType) {
case 'food':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_foods);
break;
case 'entertainment':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_entertainment);
break;
case 'room':
service.nearbySearch({
location: pos,
radius: 500,
type: [str]
}, callback_rooms);
break;
default:
break;
}
}
function callback_foods(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker_foods(results[i]);
}
}
}
function callback_entertainment(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker_entertainment(results[i]);
}
}
}
function callback_rooms(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker_rooms(results[i]);
}
}
}
function createMarker_foods(place) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon : "./icons/restaurant-15.svg",
//fillcolor : "#FF0000"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
function createMarker_entertainment(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon : "./icons/gaming-15.svg"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
function createMarker_rooms(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon : "./icons/lodging-15.svg"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}