(12) 구글 지도 API - 위치기반 서비스 제공 (끝)

자, 이제 마지막입니다.

CSS는 좀 빈약하긴 하지만 구글 지도 API를 기반으로 한 유사 에어비엔비 & 호텔스 컴바인의 예제가 완료되었습니다. 지난 포스팅들의 Main.jsp와 search.jsp 그리고 xml.jsp를 이용하면 아래와 같은 웹서비스를 구현할 수 있습니다. 저는 이클립스의 프로젝트 최상단 경로에 넣고 실행시켰습니다.

구글 지도 API로 구현된 메인 검색화면 (Main.jsp), 키워드를 입력하면 자동완성검색에 의한 주소리스트가 보여진다

먼저 메인화면입니다.

관심있는 장소 검색어를 입력하면 구글 지도 API의 주소 자동완성 기능 (Place Autocomplete)을 통해 연관 장소가 리스트로 나타나게되고 장소를 선택하면 스크립트가 실행됩니다. 이 때 해당 위치의 위도와 경도 좌표가 post 방식으로 전송되게 됩니다.

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

검색결과 화면입니다.

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

마지막으로 구글 지도의 마커를 누르면…

장소명과 주소가 정보창(infowindow)에 나타납니다. 이 정보창에는 얼마든지 텍스트를 추가할 수 있으며 img src를 통해 이미지를 출력할 수도 있습니다. 또한 다중 마커를 입력하여 여러 장소를 표시할 수 있으며 클러스터(Cluster) 기능을 통해 공통점이 있는 여러장소를 묶을 수도 있습니다. 관련 예제는 구글 공식 문서에서 제공하고 있으니 참고바랍니다.

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

...

.

이렇게 해서 구글 지도 API를 통해 유사 에어비엔비 서비스를 구현해보는 예제 프로젝트가 완료되었습니다. 사실 이것은 기본에 불과합니다. 프론트엔드와 백엔드에서 보완해야 할 부분은 아직도 많으며 서블릿과 콘트롤러 등을 이용한 MVC 패턴은 사용하지도 않았으며 아직 최적화는 단 1도 되어 있지 않는 상태입니다만 그럼에도 초보 개발자 분들이 현존하는 위치기반 웹서비스 플랫폼의 전체적인 구조를 맛보는데 조금이나마 도움이 되었길 바랍니다.

요즘같은 세상에는 대중에게 공개된 오픈소스가 정말 다양합니다. 자신이 달성하고자 하는 아이디어를 먼저 밑그림을 그리고 그에 필요한 기술들을 접목시켜봅시다. 구글 지도 API건, 카카오 지도 API건, 네이버 지도 API건 오픈 지도 API건 원리는 모두 동일합니다.

마지막은 제가 좋아하는 한 사업가의 명언으로 마무리 하겠습니다.

“일단 먼저 시작하고, 나중에 완벽해져라.”

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

'정보기술' 카테고리의 다른 글

(1) 카카오 지도 API - 지도 만들기 (0)	2022.12.17
카카오 지도 API 활용하기 - 에어비엔비 스타일 사이트 만들기 (1)	2022.12.17
(11) 구글 지도 API - 좌표 DB 불러오기 (xml 이용) (0)	2022.12.14
(10) 번외 - 검색지점 기준 반경거리 계산 (하버사인 공식) (0)	2022.12.14
(9) 구글 지도 API - 검색 인터페이스 구현 (0)	2022.12.14

당신과 나의 어바웃 라이프

(12) 구글 지도 API - 위치기반 서비스 제공 (끝)

'정보기술' 카테고리의 다른 글

댓글

티스토리툴바

(12) 구글 지도 API - 위치기반 서비스 제공 (끝)

'정보기술' 카테고리의 다른 글

관련글

댓글

티스토리툴바