Entertainment.html 7.33 KB
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>저기어때</title>

  <!-- Bootstrap core CSS-->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom fonts for this template-->
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

  <!-- Page level plugin CSS-->
  <link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">

  <!-- Custom styles for this template-->
  <link href="css/sb-admin.css" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&amp;subset=korean" rel="stylesheet">

</head>

<body id="page-top">

  <nav class="navbar navbar-expand navbar-dark bg-dark static-top">

    <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>
    </button>

  </nav>

  <div id="wrapper">

    <!-- Sidebar -->
    <ul class="sidebar navbar-nav">

      <li class="nav-item">
        <a class="nav-link" href="index.html">
          <i class="fas fa-map-marker"></i>
          <span>Map</span>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="Foods.html">
          <i class="fas fa-utensils" area-hidden="true"></i>
          <span>Foods</span>
        </a>
      </li>

      <li class="nav-item active">
        <a class="nav-link" href="Entertainment.html">
          <i class="fas fa-gamepad"></i>
          <span>Entertainment</span>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="Rooms.html">
          <i class="fas fa-bed"></i>
          <span>Rooms</span>
        </a>
      </li>


    </ul>
    <div id="content-wrapper">

      <div class="container-fluid">

        <!-- Breadcrumbs-->
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="#">Entertainment</a>
          </li>

        </ol>

        <!-- Icon Cards-->
        <div class="row" id="cardBody">
        </div>

        <!-- <script>
          var result_entertainment = []
        </script> -->
        <script>
          var result_entertainment = []
          var entName = '';
          var entType = '';
          var card = '';

          var map;
          var service;

          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('department_store', 'entertainment');
                searchPlace('movie_theater', 'entertainment');
                searchPlace('museum', 'entertainment');
                searchPlace('night_club', 'entertainment');
                searchPlace('shopping_mall', 'entertainment');
                searchPlace('zoo', 'entertainment');
              });
            }
          }

          async function searchPlace(str, placeType) {
            switch (placeType) {
              case 'food':
                service.nearbySearch({
                  location: pos,
                  radius: 500,
                  type: [str]
                }, await callback_foods);
                break;
              case 'entertainment':
                service.nearbySearch({
                  location: pos,
                  radius: 500,
                  type: [str]
                }, await callback_entertainment);
                break;
              case 'room':
                service.nearbySearch({
                  location: pos,
                  radius: 500,
                  type: [str]
                }, await callback_rooms);
                break;
              default:
                break;
            }
          }

          function callback_entertainment(results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              for (var i = 0; i < results.length; i++) {
                console.log(results[i]);
                result_entertainment.push(results[i])
              }
            }
          }

          // const id = result['id'];
          // const place_id =result['place_id'];
          // const name = result['name'];
          // const address = result['vicinity'];
          // let category_big = category1
          // const category_small = result.types[0];
          // const image = "default"
          // const rating = result.rating;
          // const lng = result.geometry.viewport.ea.j;
          // const lat =result.geometry.viewport.la.j;

          setTimeout(function(){
            for (var i = 0; i < result_entertainment.length; i++) {
            entName = result_entertainment[i][name];
            entType = "result_entertainment[i][types];"

            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;
          }
          }, 5000);
  
          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>

      </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>

    </div>
    <!-- /.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>