안녕하세요 오늘은 카카오 지도 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 |
