backend/sql_app/template/near.html

<!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.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <title>부산분리배출</title>
    <link rel="stylesheet" href="../static/css/style.css" />
    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Gothic&display=swap"
      rel="stylesheet"
    />
    <!-- Search icon -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
    />
    <!-- Reuse navBar -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 네이버맵 인증키부분 -->
    <script
      type="text/javascript"
      src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=nqswh19jjg"
    ></script>
  </head>
  <body>
    <div id="gnb_root">
      <!-- navbar -->
      <div id="nav-placeholder">
        <script>
          $.get("../static/navigation.html", function (data) {
            $("#nav-placeholder").replaceWith(data);
          });
        </script>
      </div>
    </div>
    <main class="nearMain">
      <div id="map" style="width: 100%; height: 100%"></div>
      <!-- 지도위치 조절해서 사이트 꾸미기 -->
      <script>
        // getCurrentPosition()사용해서 받은 위치를 중심으로 좌표나오게 설정
        // var mapOptions = {
        //     center: new naver.maps.LatLng(37.3595704, 127.105399),
        //     zoom: 10
        // };

        // var map = new naver.maps.Map('map', mapOptions);

        var map = new naver.maps.Map("map", {
          center: new naver.maps.LatLng(37.5666805, 126.9784147),
          zoom: 10,
          mapTypeId: naver.maps.MapTypeId.NORMAL,
        });

        var infowindow = new naver.maps.InfoWindow();

        function onSuccessGeolocation(position) {
          var location = new naver.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
          );

          map.setCenter(location); // 얻은 좌표를 지도의 중심으로 설정합니다.
          map.setZoom(10); // 지도의 줌 레벨을 변경합니다.

          infowindow.setContent(
            '<div style="padding:20px;">' +
              "geolocation.getCurrentPosition() 위치" +
              "</div>"
          );

          infowindow.open(map, location);
          console.log("Coordinates: " + location.toString());
        }

        function onErrorGeolocation() {
          var center = map.getCenter();

          infowindow.setContent(
            '<div style="padding:20px;">' +
              '<h5 style="margin-bottom:5px;color:#f00;">Geolocation failed!</h5>' +
              "latitude: " +
              center.lat() +
              "<br />longitude: " +
              center.lng() +
              "</div>"
          );

          infowindow.open(map, center);
        }

        $(window).on("load", function () {
          if (navigator.geolocation) {
            /**
             * navigator.geolocation 은 Chrome 50 버젼 이후로 HTTP 환경에서 사용이 Deprecate 되어 HTTPS 환경에서만 사용 가능 합니다.
             * http://localhost 에서는 사용이 가능하며, 테스트 목적으로, Chrome 의 바로가기를 만들어서 아래와 같이 설정하면 접속은 가능합니다.
             * chrome.exe --unsafely-treat-insecure-origin-as-secure="http://example.com"
             */
            navigator.geolocation.getCurrentPosition(
              onSuccessGeolocation,
              onErrorGeolocation
            );
          } else {
            var center = map.getCenter();
            infowindow.setContent(
              '<div style="padding:20px;"><h5 style="margin-bottom:5px;color:#f00;">Geolocation not supported</h5></div>'
            );
            infowindow.open(map, center);
          }
        });
      </script>
    </main>
  </body>
</html>