본문 바로가기
JavaScript

[Javascript] Kakao 지도 Javascript API 를 사용해서 지도 표시 및 마커 찍기

by teamnova 2022. 4. 29.

안녕하세요 오늘은 카카오 지도 api 를 사용해서 지도를 띄우고 마커를 찍어보겠습니다.

 

https://apis.map.kakao.com/web/guide/

Kakao 지도 API 페이지에 들어가서 안드로이드, 웹, iOS 중 웹을 선택합니다.

 

Kakao 지도 Javscript API 는 키 발급을 받아야 사용할 수 있습니다.
그리고 키를 발급받기 위해서는 카카오 계정이 필요합니다.

 

카카오 개발자사이트 (https://developers.kakao.com/) 에 접속해서 로그인 또는 회원가입을 합니다.

'내 어플리케이션' 메뉴에 들어가서 '애플리케이션 추가하기'를 선택합니다.

앱 아이콘(선택), 앱 이름(필수), 사업자명(필수) 를 설정하고 저장을 누릅니다.

이렇게 어플리케이션이 추가된 것을 확인하실 수 있습니다.

어플리케이션을 클릭하면 나오는 앱 키 중에서 JavaScript 키를 지도 API 의 appkey 로 사용하게 됩니다.

 

플랫폼 설정하기 - Web 플랫폼 등록 - 사이트 도메인을 등록합니다. (예: http://localhost)

이곳에 등록한 사이트 도메인에서만 지도 API를 사용할 수 있습니다.

 

도큐먼트 루트에 kakaomaps 라는 폴더를 만들고 그 안에 index.html 파일을 만들어줍니다.

전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Kakao Maps API</title>
    <!-- 카카오 지도 api -->
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은앱키를입력하세요"></script>
</head>
<body>
    <div id="map" style="width:800px; height:500px;"></div>
    <div id="clickLatlng"></div>
    
	<script>

        var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
        var options = { //지도를 생성할 때 필요한 기본 옵션
            center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
            level: 3 //지도의 레벨(확대, 축소 정도)
            // disableClickZoom: true // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
        };

        var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

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

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

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

        // 아래 코드는 지도 위의 마커를 제거하는 코드입니다
        // marker.setMap(null);    

        // 지도에 클릭 이벤트를 등록합니다
        // 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
        kakao.maps.event.addListener(map, 'click', function(mouseEvent) {        
            
            // 클릭한 위도, 경도 정보를 가져옵니다 
            var latlng = mouseEvent.latLng; 
            
            // 마커 위치를 클릭한 위치로 옮깁니다
            marker.setPosition(latlng);
            
            // 마우스로 클릭한 위치의 위도와 경도를 표시할 메세지
            var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
            message += '경도는 ' + latlng.getLng() + ' 입니다';

            // 'clickLatlng'라는 아이디값을 가진 <div> 태그의 innerHTML 으로 위 메세지를 설정합니다.
            var resultDiv = document.getElementById('clickLatlng'); 
            resultDiv.innerHTML = message;
            
        });

	</script>

</body>
</html>

 

먼저 실제 지도를 그리는 Javascript API 를 불러옵니다. 발급받은 앱 키를 아래와 같이 입력합니다.

// 이라는 상대 프로토콜을 사용하면, 사용자의 http, https 환경에 따라 자동으로 해당 프로토콜을 따라가게 됩니다.

API를 로딩하는 스크립트 태그는 HTML파일안의 head, body 등 어떠한 위치에 넣어도 상관없습니다.
하지만, 반드시 실행 코드보다 먼저 선언되어야 합니다.

 

 

다음으로 지도를 담기 위한 영역이 필요합니다. id 값이 'map'인 <div> 태그를 선언합니다.

 

그리고 클릭한 위치의 위도와 경도를 표시할 <div> 태그를 선언하고 id 값은 'clickLatLng' 로 설정합니다.

 

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
    center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
    level: 3 //지도의 레벨(확대, 축소 정도)
    // disableClickZoom: true // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

지도를 띄우는 코드입니다. 

Map 객체의 두 번째 파라메터로 넣는 options 의 속성 중, center 는 지도를 생성하는데 반드시 필요합니다.
center 에 할당할 값은 LatLng 클래스를 사용하여 생성합니다. 흔히 위경도 좌표라고 부르는 WGS84 좌표계의 좌표값을 넣어서 만드는데요, 생성인자는 위도(latitude), 경도(longitude) 순으로 넣어주세요.

 

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

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

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

// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);

다음으로 마커를 생성하고 지도 위에 표시되도록 설정합니다. 

 

// 지도에 클릭 이벤트를 등록합니다
// 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {        

    // 클릭한 위도, 경도 정보를 가져옵니다 
    var latlng = mouseEvent.latLng; 

    // 마커 위치를 클릭한 위치로 옮깁니다
    marker.setPosition(latlng);

    // 마우스로 클릭한 위치의 위도와 경도를 표시할 메세지
    var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
    message += '경도는 ' + latlng.getLng() + ' 입니다';

    // 'clickLatlng'라는 아이디값을 가진 <div> 태그의 innerHTML 으로 위 메세지를 설정합니다.
    var resultDiv = document.getElementById('clickLatlng'); 
    resultDiv.innerHTML = message;

});

다음으로 지도에 클릭 이벤트를 등록합니다.

지도가 클릭될 때마다 클릭한 위치의 위도 및 경도 정보가 latlng 변수에 담기게 되고, 마커는 클릭한 위치로 이동합니다.

그리고 클릭한 위치의 위도 및 경도 값이 표시됩니다.

 

http://localhost/kakaomaps/index.html 를 확인해보면 지도가 정상적으로 띄워지고 마커가 잘 찍히는 것을 확인할 수 있습니다.

 

'JavaScript' 카테고리의 다른 글

[Javascript] 공기방울 효과 만들기  (0) 2022.05.02
[Javascript] 알림창 종류알아보기 (Alert , Confirm, Prompt)  (0) 2022.04.30
[Javascript] OpenWeather API를 사용하여 현재 날씨 가져오기  (0) 2022.04.22
[Javascript] 마우스 이벤트  (0) 2022.04.18
[Javascript] 정규식으로 전화번호 형식 확인하기  (0) 2022.04.13

관련글

티스토리툴바