카카오 지도를 이용한 여행 블로그 만들기
카카오 지도 API & 워드프레스 REST API
가족의 여행 일기를 남겨두기 위해 워드프레스로 사이트를 하나 만들면서 단순 포스트들로만 구성을 하다 보니 갔었던 여행지들을 한눈에 좀 보면 좋겠다는 생각에 기존에 이용을 했던 카카오 지도 API와 워드프레스의 REST API를 다시 적용해보기로 했습니다. (원래 구현됐었던 게 있었는데, 무료 호스팅 기간이 지난 걸 몰라 그대로 날아간...)
간단히 기능을 요약해 보면,
방문했던 좋았던 장소들을 워드프레스의 포스트(destination)로 작성할 때 글의 메타 정보로 주소를 입력해 놓으면 전국 지도 위에, 이 장소들이 표시가 되고, 확대했을 때 제목을 클릭하면 바로 글의 상세 페이지로 연결
이런 방식입니다.
기존에 적용해 봤던 방법이라 대략의 방향은 기억이 나는데, 막상 다시 적용을 하려고 하니 또 막히는 부분들이 발생하네요. 갑갑하고 머리 아프고. 분명 어찌어찌 해결을 했던 것 같은데... 그래서 이참에 처음부터 다시 적용을 해 보면서 다음에는 시간 소모를 줄이기 위해 정리를 해 보면 좋겠다는 생각이 들었습니다.
전체 과정부터 정리해 보면 이렇습니다.
1. 카카오 개발자 웹에서 웹용 js키 발급 (카카오 계정만 있으면 뚝딱)
2. 푸터(footer)쪽에 wp_enqueue_script로 api 연결 (클러스터러, 주소 변환 서비스도 연결 : &libraries=services,clusterer)
3. 주소 표시를 위한 js 파일 연결 (api 연결 다음에 위치!)
4. 장소들 rest api 주소 (/wp-json/wp/v2/destination)
5. 카카오 지도에 표시할 주소를 ACF 필드로 입력 (REST API 노출 옵션 있음)
6. 비로그인 사용자는 REST API 주소 이용 못 하게 막음 (플러그인 이용)
7. 기본 CPT(destination) RestApi 주소로 입력된 주소를 자동 변환, 여러 개의 마커 표시까지 성공. but 클러스터러(지도가 확대되면 하나로 뭉쳐 보이게 하는 방식) 표시가 제대로 안 됨
8. 코어 REST API 주소 대신 커스텀 주소를 만들어서 원하는 데이터를 만드는 것으로 방향 전환 (예: /custom/v1/destination)
8-1. https://www.youtube.com/watch?v=-OsWzDrnrHM
8-2. https://www.youtube.com/watch?v=lAl9m-yCwGA
9. 그래도 클러스터러 표시 안 되는 문제 > 위도, 경도를 아예 미리 json 데이터에 표시하는 것으로 바꿈 (루프 내에서 카카오 맵 주소 검색하는 것을 X)
10. 이제 클러스터러 표시 OK
11. 각 마커 위에 각 글로 갈 수 있는 링크가 연결된 타이틀 레이어 표시
12. 레이어를 닫기도 할 수 있게 하려면, 요소 내에 나만 닫히게 하는 스크립트가 포함되어야 해서 js로 닫기 함수가 포함된 Element를 생성
13. 지도의 레벨을 체크해서 레벨이 크면 마커 위에 뜬 레이어를 숨김 조치 (레벨이 높아진 지도에서 레이어들이 겹쳐 보이는 것 방지)
14. 커스텀 Rest API 주소 외 모든 코어 주소들 차단 (보안 목적)
저도 API를 활용하는 이런 방식은 자주 사용하던 게 아니라 늘 참 헷갈립니다. 그래도 워낙 체계가 이미 잘 만들어진 것이라 눈썰미만 있으면 어느 정도는 해결이 가능한 부분이었습니다. 다음 글들은 히스토리 순서대로 어떤 부분을 적용하고 이슈는 어떤 것이 있을 수 있는지 순서대로 한 번 정리해 보겠습니다.
다음으로 계속.
