사진(exif)의 GPS 정보를 받아와 카카오 맵으로 띄우기 (only js)

spring 프로젝트 중 고객 요청 사항 중에 사진 업로드를 하면 GPS 정보를 불러와
카카오 맵 으로 지도를 표시 해주는 기능이 있었는데
java로 구현하려니 차라리 전부 js로만 구현할 수 있는 방법이 없을까 생각하다가..

exif-js

https://github.com/exif-js/exif-js

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

자신의 프로젝트에 등록

kakaomap

카카오 맵 api 발급하고 설정할 때 주의 사항 (웹 기준)

1. 앱키는 Javascript키로 적용

2. 설정에서 플랫폼 → 웹

3. 사이트 도메인 설정 → 자신 pc 테스트면 localhost, 추후에 배포하면 배포할 주소 등록 안 해주면 카카오 맵 표시가 안됨

4. 반드시 services 라이브러리 적용 시켜야 함. 나중에 좌표 값 받아서 넣어도 동작을 안 하는 현상이 있습니다.

   <!-- services 라이브러리 불러오기 -->
   <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APIKEY&libraries=services"></script>

실제 적용된 코드

<div id="map" style="width:320px;height:220px;"> 
    //카카오지도 불러오기, 크기는 본인 자유
    <script>
    document.getElementById("img1").onload = function() { 
    //사진을 불러왔을때 작동하므로 onload 사용함
    EXIF.getData(this, function() {
        var exifLong = EXIF.getTag(this, "GPSLongitude");
        var exifLat = EXIF.getTag(this, "GPSLatitude");
        var exifLongRef = EXIF.getTag(this, "GPSLongitudeRef");
        var exifLatRef = EXIF.getTag(this, "GPSLatitudeRef");
        //계산식 적용이유는 해당라이브러리가 위도경도를 도분초 단위로 출력하기 때문
        if (exifLatRef == "S") {
            var latitude = (exifLat[0]*-1) + (( (exifLat[1]*-60) + (exifLat[2]*-1) ) / 3600);						
        } else {
            var latitude = exifLat[0] + (( (exifLat[1]*60) + exifLat[2] ) / 3600);
        }

        if (exifLongRef == "W") {
            var longitude = (exifLong[0]*-1) + (( (exifLong[1]*-60) + (exifLong[2]*-1) ) / 3600);						
        } else {
            var longitude = exifLong[0] + (( (exifLong[1]*60) + exifLong[2] ) / 3600);
        }

        wtmX = latitude,
        wtmY = longitude;

        var container = document.getElementById('map');
        var options = {
            center: new kakao.maps.LatLng(wtmX, wtmY), //wtmX, wtmY 받아옴
            level: 3
        };

        var map = new kakao.maps.Map(container, options);

        // 마커가 표시될 위치입니다 
        var markerPosition  = new kakao.maps.LatLng(wtmX, wtmY); 

        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
            position: markerPosition
        });

        // 마커가 지도 위에 표시되도록 설정합니다
        marker.setMap(map);

    })
};

</script>

고수들은 한 시간에 끝낼걸 다섯 시간 정도 소요되었습니다.
아무리 검색해도 자료가 없고 java로 받아 오긴 배보다 배꼽이 큰 것 같아서
이렇게 구현했습니다. 단점도 있을 것 같지만..
개발 업무 반년도 안 되서 아는 것이 없으니 이만 마치도록 하겠습니다.
개발 업무에 보탬 되시길 바라며..