지도 API에 대하여 (카카오 지도 API)

 

 

🗼 카카오 지도 API

웹/앱에서 지도 기능을 구현할 수 있는 API

카카오 지도 서버에서 지도 이미지, 위치 정보, 길찾기, 마커, 커스텀 오버레이 등을 가져와서 보열줄 수 있음

JavaScript 기반 웹용과 REST 기반 서버용 두 가지 제공

즉, 지도 보여주기 + 위치 표시 + 검색 + 길 찾기 등 지도 관련 기능을 쉽게 구현하게 해주는 서비스

 

 

 

🗼 사용 가능한 기능

 

지도 표시

특정 위치(위도, 경도)에 지도 표시

줌인/줌아웃, 지도 타입(로드뷰, 위성) 변경 가능

var mapContainer = document.getElementById('map'); // 지도를 표시할 div
var mapOption = { 
    center: new kakao.maps.LatLng(37.5665, 126.9780), // 서울 좌표
    level: 3 // 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption);

 

 

 

마커 표시

특정 위치에 핀(마커) 표시

클릭 시 정보창 표시 가능

var marker = new kakao.maps.Marker({
    position: new kakao.maps.LatLng(37.5665, 126.9780)
});
marker.setMap(map);
var infowindow = new kakao.maps.InfoWindow({
    content: '<div>서울</div>'
});
infowindow.open(map, marker);

 

 

 

길찾기 & 거리 계산

출발시 ➡ 목적지 경로 안내

자동차, 대중교통, 도보 경로 제공

REST API와 연계 가능

 

 

 

장소 검색

kakao.maps.services.Places를 이용해 키워드 검색 가능

ex) 카페, 편의점, 오리엔탈샵

var ps = new kakao.maps.services.Places();
ps.keywordSearch('카페', function(data, status, pagination) {
    if (status === kakao.maps.services.Status.OK) {
        console.log(data); // 검색 결과 좌표, 주소 등
    }
});

 

 

---

 

 

커스텀 오버레이

마커 대신 HTML로 자유롭게 표시 가능

지도 위에 팝업처럼 위치 표시

 

 

---

 

 

장점

1. 쉽게 구현 가능 : 복잡한 지도 서버 없이도 사용 가능

2. 카카오 플랫폼과 연계 : 장소 검색, 길찾기, 주소 변환 등 편리

3. 무료/상용 API 제공 : 대부분 무료로 사용 가능 (일일 호출 제한 있음)

 

 

사용 시 주의

API 키 필요 : 카카오 개발자 사이트에서 발급

도메인 등록 필수 : 웹에서 사용 시 도메인을 등록해야 사용 가능

쿼터 제한 : 무료 호출 수 제한 있음 ➡ 많으면 유료 요금제 필요