(11) 카카오 지도 API – 위치기반 서비스 제공 (끝)

2022.12.17 - [정보기술] - (1) 카카오 지도 API - 지도 만들기

2022.12.17 - [정보기술] - (2) 카카오 지도 API - 단일 마커 표시하기

2022.12.17 - [정보기술] - (3) 카카오 지도 API - 다중 마커 표시하기

2022.12.17 - [정보기술] - (4) 카카오 지도 API - 정보창 표시하기

2022.12.17 - [정보기술] - (5) 카카오 지도 API - 커스텀 정보창 표시하기

2022.12.17 - [정보기술] - (6) 카카오 지도 API - 주소 검색하고 목록으로 나타내기

2022.12.17 - [정보기술] - (7) 카카오 지도 API - 특정 주소의 좌표 확인하기

2022.12.17 - [정보기술] - (8) 카카오 지도 API - 좌표 DB 등록하기

2022.12.17 - [정보기술] - (9) 카카오 지도 API - 검색 인터페이스 구현

2022.12.17 - [정보기술] - (10) 카카오 지도 API - 좌표 DB 불러오기 (xml 이용)

2022.12.17 - [정보기술] - (11) 카카오 지도 API – 위치기반 서비스 제공 (끝)

 

자, 이제 마지막 입니다.

드디어 카카오 지도 API를 기반으로 한 유사 에어비엔비 & 호텔스 컴바인의 예제가 완료되었습니다.

지난 포스팅들의 Main.jsp와 search.jsp 그리고 xml.jsp를 이용하면 아래와 같은 웹서비스를 구현할 수 있습니다. 저는 이클립스의 프로젝트 최상단 경로에 넣고 실행시켰습니다.

카카오 지도 API 기반으로 제작된 위치장소 검색창

아쉽게도 자동완성(AutoComplete)을 지원하지는 않는다

먼저 메인화면입니다.

관심있는 장소 검색어를 입력하면 되는데 구글 지도 API와는 다르게 주소 자동완성 기능 (Place Autocomplete)은 없으며 이 때 검색된 특정 위치의 위도와 경도 좌표가 post 방식으로 전송되게 됩니다.

검색결과 (search.jsp) 화면, 임의로 전주소재의 국제한식조리학교를 DB에 입력하고 로딩하였다

 

검색결과 화면입니다.

왼쪽에는 앞서 설정했었던 주소, 장소명, 위도, 경도 좌표가 출력되었고 (임의의 장소는 전주소재의 국제한식조리학교) 오른쪽에는 해당 위치가 카카오 지도 마커를 통해 나타나고 있습니다.

 

카카오 지도의 마커를 클릭하면 장소명과 주소가 뜨도록 정보창(infowindow)를 설정하였다

 

마지막으로 카카오 지도의 마커를 누르면 장소명과 주소가 정보창(infowindow)에 나타납니다.

 

이 정보창에는 얼마든지 텍스트를 추가할 수 있으며 img src를 통해 이미지를 출력할 수도 있습니다. 또한 다중 마커를 입력하여 여러 장소를 표시할 수 있으며 클러스터(Cluster) 기능을 통해 공통점이 있는 여러장소를 묶을 수도 있습니다.

관련 예제는 카카오 지도 개발자 공식 문서에서 제공하고 있으니 참고바랍니다.

 

맺으며

이렇게 해서 카카오 지도 API를 통해 유사 에어비엔비 서비스를 구현해보는 예제 프로젝트가 완료되었습니다. 구글 지도 API와 90% 이상 유사한 형태로 진행된다는 것을 느끼셨을 겁니다.

이 포스팅들이 위치기반 웹서비스 플랫폼의 전체적인 구조를 경험하는데 있어서 초보 개발자 분들에게 조금이나마 도움이 되었길 바랍니다.

요즘같은 세상에는 대중에게 공개된 오픈소스가 정말 다양합니다. 자신이 달성하고자 하는 아이디어를 먼저 밑그림을 그리고, 그에 필요한 기술들을 접목시켜봅시다.

그 동안 부족한 포스팅을 읽어주셔서 감사합니다. :)