카카오 맵 API를 이용하여 현재위치와 커스텀마커 표시하기

 

안녕하세요. 술도입니다.

https://youip.net 만들다가 카카오맵 API를 이용해서 현재위치를 지도로 표시해주는 기능을

넣는데 카카오에서 기본적으로 제공하는 예제에는 현재위치 + 커스텀마커 예제가 없어서 

수정하여 적용해 보았습니다.

 

기본 사용법은 카카오 맵 API 사용하는거랑 똑같고 일부 스크립트 내용만 수정해 주면 됩니다.

우린 또 귀찮은거 싫어하니깐 바로 소스 알려드립니다..(대충 정리한 소스라 양해 바랍니다.)

<!-- Kakao Map Javscript API -->
<!--실제 지도를 그리는 Javascript API 및 API KEY -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API KEY"></script>

<!-- 지도영역, id="map" 변경하면 지도표시 안됩니다. -->
<div id="map" style="width:100%;height:300px;"></div>
<div><h5>설명 안내 블라블라~</h5></div>

<!-- Kakao Map API 사용자적용(현재위치 + 커스텀이미지마커)-->
<script src="kakao_geomap.js"></script>

 

kakao_geomap.js 파일의 내용은 아래와 같습니다.

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 6 // 지도의 확대 레벨 
    }; 

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 마커 이미지를 생성합니다
var imageSrc = '/images/marker_kakao.png', // 마커이미지의 주소입니다    
    imageSize = new kakao.maps.Size(50, 65), // 마커이미지의 크기입니다
    imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);

// 마커를 생성합니다
var marker = new kakao.maps.Marker({
    position: mapOption.center,
    image: markerImage // 마커이미지 설정 
});

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

function getLocation() {
    // HTML5의 geolocation으로 사용할 수 있는지 확인합니다 
    if (navigator.geolocation) {
        // GeoLocation을 이용해서 접속 위치를 얻어옵니다
        navigator.geolocation.getCurrentPosition(function(position) {
            var lat = position.coords.latitude, // 위도
                lon = position.coords.longitude; // 경도
            var locPosition = new kakao.maps.LatLng(lat, lon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
            // 마커 위치를 설정합니다
            marker.setPosition(locPosition);
            // 지도 중심좌표를 접속위치로 변경합니다
            map.setCenter(locPosition); 
        });
    } else { 
        // GeoLocation을 사용할 수 없을 때 기본 마커 위치를 설정합니다
        // 이미 생성한 마커를 지도 위에 표시합니다
        marker.setMap(map);
    } 
}

 

사용하는 방법은 우선 카카오 개발자페이지를 통해 앱키를 발급받습니다.

그리고 발급받은 API키를 첫번째 코드의 스크립트 뒷 부분 appkey= 다음에 넣습니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=asdlhbaVSDKLAHSFVD"></script>

뭐 이런식이 되겠죠.

앱키가 노출되면 어떻게 하냐..싶지만 앱키는 카카오 개발자페이지에서 애플리케이션

생성시 입력한 URL 에서만 동작이 되기 때문에 노출되어도 큰 문제는 없으니 안심하시기

바랍니다.

그리고 kakao_geomap.js 파일 을 다운로드 합니다.(ZIP으로 압축해서 등록해 놓았습니다.)

(2023.02.26 자바스크립트에 오류가 있어서 수정하였습니다.)

kakao_geomap.zip

0.00MB

실제 사용시 js 파일에서 아래 부분만 커스텀마커에 맞게 적절하게 수정해서 사용하시면 됩니다.

marker_kakao.png

(제가 직접 만든 커스텀 마커입니다.50*65)

        var imageSrc = '/images/marker_kakao.png', // 마커이미지의 주소입니다    
            imageSize = new kakao.maps.Size(50, 65), // 마커이미지의 크기입니다

 

실제 적용된 사이트는 https://youip.net 에서 확인할 수 있습니다.

사이트 접속부터 GeoLocation 을 요청하면 좀 그럴수 있으니 권한요청 버튼 클릭시 GeoLocation 사용여부를 선택할 수 있게 되어 있습니다.

 GeoLocation 차단 또는 사용불가시

GeoLocation을 차단하면 기본위치인 카카로본사 위치로 커스텀마커를 표시합니다.

 GeoLocation 허용시

GeoLocation을 허용하면 현재 위치에 커스텀마커를 표시합니다.

더 자세한건 아래 링크 가이드를 통해 참고바랍니다.
https://apis.map.kakao.com/web/guide/