#4. 마커 위에 링크가 있는 타이틀 표시
카카오 지도 API & 워드프레스 REST API
먼저, #1 ~ #3까지의 요약입니다.
1. 내 사이트에 카카오 지도의 다양한 기능을 추가할 수 있도록 API가 제공되고 있다.
2. 지도에 마커를 표시할 때 각 마커의 정보는 JSON 데이터 타입을 이용한다.
3. 워드프레스는 JSON 데이터를 쉽게 만들어 주는 REST API를 제공한다. (ver 4.7 이후부터)
이를 이용해서 여행한 장소들에 대한 콘텐츠를 '장소(destination)'이라는 포스트 타입을 만들어서 작성했고, 이때 장소의 주소 정보는 ACF 플러그인을 이용, 글의 부가 정보로 저장하여 지도에 표시할 때 이용하는 것까지를 했었습니다. 마커들이 비슷한 장소에 여러 개 있어서 겹쳐 보이는 것을 방지하고자 할 때, 클러스터러로 표시하는 방법이 있었습니다.
지도에 포스트들에 있는 위치 정보를 이용해서 마커들을 표시했으니, 다음으로는 지도에서 장소 글(destination)로 갈 수 있는 링크들을 표시할 차례입니다. 이번 글은 이에 대한 내용입니다.
마커 위에 정보를 표시하는 방법은 두 가지가 있습니다.
1. 인포윈도우
2. 커스텀 오버레이
차이점이라면 카카오 지도에서 만들어 놓은 것을 쓸 거냐, 아니면 내 마음대로 만들어 쓸 거냐입니다.
1. 인포윈도우
먼저 1번의 방법을 적용해 봤습니다.
마커에 인포윈도우를 넣고, 클릭했을 때 표시가 되면서, 닫기 버튼이 포함되도록 하는 방법은 샘플을 참고하여 작성할 수 있었습니다.
> https://apis.map.kakao.com/web/sample/addMarkerClickEvent/
infowindow는 카카오 지도의 API에서 제공되고 있는 기본적인 마커의 정보 표시 방법입니다. 반복문 내에서 각 마커를 하나씩 만들 때 'kakao.maps.InfoWindow()'라는 메서드를 이용해서 정보 표시를 위한 박스를 하나 만들어서 연결합니다. 화면에 표시는 'infowindow.open(map, marker);'라고 명령을 해야 하는데, 이걸 각 마커를 클릭했을 때 나오도록 이벤트를 등록할 수도 있습니다.
각 infowindow 내에 들어갈 콘텐츠는 JSON 데이터에서 확인 가능한 제목과, 글로 가는 링크(permalink)를 이용해서 각 장소로 가는 링크 제목이 표시되도록 할 수 있습니다. 의도대로 잘 표시는 되는데, 표시되는 공간을 css로 컨트롤하기가 다소 어렵다는 점, 글자가 많던 적던 같은 사이즈의 박스가 나온다는 점 등이 아쉬워서 다른 방법을 다시 확인해 봤습니다.
2. 커스텀 오버레이
이 방법은 마커 위 콘텐츠를 내 마음대로 만들어서 적용할 수 있는 방법입니다.
> https://apis.map.kakao.com/web/sample/removableCustomOverlay/
1번의 인포윈도우(infowindow) 추가와 방법은 거의 같습니다. 콘텐츠를 만들고 마커의 위치 위에 오버레이를 준비해 놓은 다음, 마커를 클릭했을 때 오버레이가 보이게 한다는 원리입니다.
단, 이 방법은 구조도 마음대로 만들 수 있기에 닫기 버튼이 필요할 경우 알아서 만들어 넣고, 닫기 버튼에 대한 이벤트 체크도 직접 해야 한다는 문제가 있습니다.
시행착오와 카카오 지도 API 개발자 커뮤니티의 기존 질문들을 참고해 본 결과, 열리게 하는 클릭 이벤트는 반복문 안에 포함 시 잘 적용이 되던데, 각 오버레이를 닫게 하는 동작은 html 구조 내에 포함된 이벤트 처리문에 의해서만 가능하더라고요. 그래서 javascript로 html 구조를 만드는 방법을 적용했습니다.
여기까지 하면 내 콘텐츠들의 정보를 활용해서 지도에 마커들을 표시, 마커를 통해 콘텐츠를 열어 볼 수 있는 기본적인 구조는 완료가 될 수 있습니다.
한 가지 더 조치를 해보자면, 오버레이를 켠 상태에서 지도의 레벨이 높아질 경우 여러 오버레이가 한 지역에 겹쳐서 표시될 수 있는 문제가 있었습니다.
저는 지도의 확대, 축소 이벤트 체크를 이용해서 현재 적용된 지도의 레벨이 지정한 수치보다 크면, 커스텀 오버레이를 화면에서 숨기는 조치를 하는 것으로 해결을 해봤습니다. (※ css의 visibility: hidden 속성 이용)
(샘플) 확대, 축소 이벤트 등록하기
> https://apis.map.kakao.com/web/sample/addMapZoomChangedEvent/
임시 테스트 페이지
> https://oksdev-map.tk/trip-area/
여기까지 하면 카카오 지도 API와 워드프레스의 REST API를 활용해서 내가 방문했던 장소들을 지도에 표시해 가면서 운영하려고 했던 목표는 완료가 된 듯합니다.
다음 글에서는 JSON 데이터 처리를 뚝딱 할 수 있게 도와주는 REST API 주소이지만 현재 쓸 일이 없다면 보안상 차단을 해 놓는 게 좋을 거 같아 이에 대해 한 번 정리해 보겠습니다.
다음으로...
