카카오 지도 WEB API : 장소 ID 받아오기 및 지도 URL 생성

Kakao Maps API 장소 ID

Kakao Maps API : 장소 ID 활용 장점 및 가져오는 방법

카카오 맵에서 지도 URL 생성 방법은 크게 좌표(위도, 경도)를 사용하거나 장소ID를 사용하는 방법이 있습니다. 좌표를 사용하면 단순위 위치만 전달하지만, 장소 ID를 사용하면 장소명이 선택된 지도가 표시됩니다. 이 포스트에서는

장소 ID를 사용하면 좋은 점과 장소 ID를 얻는 방법

에 대해 소개합니다.

 

지도 URL 생성

URL 생성 방법 및 결과 차이

카카오 맵 API 공식 문서를 보면 지도 URL을 생성하는 방법은 아래 3가지입니다. 아래 3가지의 URL을 접속하는 경우 아래 그림과 같은 결과가 브라우저 또는 카카오 지도 어플로 연결됩니다.

• /link/map/위도,경도 👉 map.kakao.com/link/map/37.402056,127.108212
• /link/map/이름, 위도,경도 👉 map.kakao.com/link/map/우리회사,37.402056,127.108212
• /link/map/장소ID 👉 map.kakao.com/link/map/18577297

(왼) 좌표로 URL 생성, (중) 이름+좌표로 URL 생성, (우) 장소 ID로 URL 생성

위의 결과처럼 장소 ID를 사용하여 URL을 생성하면 해당 장소의 정보를 바로 볼 수 있게 됩니다. API를 사용하는 여러 가지 목적이 있을 수 있지만, 일반적으로 장소 ID를 활용한 링크는 사용자 환경을 더 쾌적하게 만들어 줄 수 있습니다. 

 

장소 ID 얻어오기

좌표를 사용하여 장소 ID를 얻어오는 방법이 있으면 좋겠지만, 좌표를 사용하는 경우 동일한 좌표 내에 복층 건물 가게 이름을 지정하기 어렵기 때문에, 그런 기능은 없습니다. 결과적으로 장소 ID는 키워드로 장소 검색 또는 카테고리로 장소 검색 후 검색 결과로부터 장소의 ID를 가져올 수 있습니다. 

키워드로 검색

이전 포스트들은 좌표를 이용하여 지도의 중심 또는 마커를 표시하는 방법을 사용했지만, 카카오 지도 앱에서 장소를 검색하는 것과 같이 API내에서도 키워드로 검색하여 장소 ID, 좌표 등을 얻어오는 방법이 있습니다. 키워드로 검색하는 방법은 아래와 같습니다.

• 장소 검색 객체를 생성
• 키워드로 장소를 검색
• 검색 완료 시 호출되는 콜백 함수에서 결과 처리

// 장소 검색 객체를 생성합니다
var ps = new kakao.maps.services.Places();

// 키워드로 장소를 검색합니다
ps.keywordSearch('키워드 입력', placesSearchCB); 

// 키워드 검색 완료 시 호출되는 콜백함수 입니다
function placesSearchCB (data, status, pagination) {
    if (status === kakao.maps.services.Status.OK) {
		
        // 코드 작성
        
	}
}

검색 완료시 호출되는 콜백 함수는 data, status, pagination 3개의 매개변수를 입력받습니다. 키워드로 검색된 장소에 대한 데이터는 data에 저장되어 있습니다. 키워드로 검색된 결과는 복수이기 때문에 data는 배열입니다. 이 data 객체로부터 장소 ID 이외에 다양한 장소에 대한 정보를 얻을 수 있습니다.

• data 객체 주요 프로퍼티
  • id : 장소 ID
  • place_name : 장소명, 업체명
  • category_name : 카테고리 이름
  • phone : 전화번호
  • address_number : 지번 주소
  • road_address_name : 전체 도로명 주소
  • x : X 좌표값, 경위도인 경우 경도
  • y : 좌표값, 경위도인 경우 위도

 

예시 코드

아래 코드는 서울역을 키워드를 검색 후 첫 번째 결과만 지도의 마커로 표시합니다. 검색 결과로부터 장소 ID를 취득하여 생성한 지도 URL을 마커의 클릭 이벤트로 설정한 코드입니다. plcaesSearchCB() 검색 결과 완료 콜백 함수의 data를 사용하여, 43번 줄에서 장소 id를 활용한 url을 생성 후 마커의 클릭 리스너에 등록하였습니다. 

<div id="map" style="position:relative; width: 100%; height: 350px;"></div>
<script>
    var inputData = ['서울역']

    var mapContainer = document.getElementById('map'),
        mapOption = {
            center: new kakao.maps.LatLng(37.54699, 127.09598),
            level: 3
        };
    var map = new kakao.maps.Map(mapContainer, mapOption);
    var count = 0;
    var ps = new kakao.maps.services.Places();
    var bounds = new kakao.maps.LatLngBounds();

    if (inputData != null) {
        kewwordSearch(inputData[count]);
    }

    function kewwordSearch(keword) {
        ps.keywordSearch(keword, placesSearchCB);
        count = count + 1;
    }

    function placesSearchCB(data, status, pagination) {
        if (status === kakao.maps.services.Status.OK) {
            displayMarker(data[0]);
            bounds.extend(new kakao.maps.LatLng(data[0].y, data[0].x));
            if (count < inputData.length) {
                kewwordSearch(inputData[count]);
            } else if (count == inputData.length) {
                setBounds();
            }
        }
    }

    function displayMarker(place) {
        var marker = new kakao.maps.Marker({
            map: map,
            position: new kakao.maps.LatLng(place.y, place.x),
        });
        kakao.maps.event.addListener(marker, 'click', function () {
            var position = this.getPosition();
            var url = 'https://map.kakao.com/link/map/' + place.id;
            window.open(url, '_blank');
        });
    }

    function setBounds() {
        map.setBounds(bounds, 90, 30, 10, 30);
    }
</script>

 

실행 결과

위 코드를 실행한 지도는 아래와 같고, 마커를 클릭하면 해당 장소 정보가 포함된 지도를 브라우저 또는 카카오 지도 앱에서 볼 수 있습니다.

 

끝까지 읽어 주셔서 감사합니다.^^

관련포스트

🤞 카카오맵 API 관련글 목록 보기

🤞 카카오맵 생성기 목록 보기