map.ejs 1.27 KB
<!DOCTYPE html>
<html>
  <head>
    <title>KaKao Map</title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
  </head>
  <body>
    <div id="map" style="width: 100%; height: 575px"></div>

    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=68cbccbcd6f0fef0a213e62ad37393ee"
    ></script>
    <script>
      var lat = "";
      var lon = "";

      var mapContainer = document.getElementById("map"),
        mapOption = {
          center: new kakao.maps.LatLng(36.2477502, 127.078164),
          level: 3,
        };

      var map = new kakao.maps.Map(mapContainer, mapOption);

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
          lat = position.coords.latitude;
          lon = position.coords.longitude;

          var locPosition = new kakao.maps.LatLng(lat, lon);

          displayMarker(locPosition);
        });
      } else {
        var locPosition = new kakao.maps.LatLng(36.2477502, 127.078164);

        displayMarker(locPosition);
      }

      function displayMarker(locPosition) {
        var marker = new daum.maps.Marker({
          map: map,
          position: locPosition,
        });

        map.setCenter(locPosition);
      }
    </script>
  </body>
</html>