#3. REST API 주소 만들기, 클러스터러 표시
카카오 지도 API & 워드프레스 REST API
지난 글까지 진행됐던 내용을 먼저 정리해 보겠습니다.
1. 카카오 지도는 API를 제공하고 있어서, 간단한 사용 신청 후 API 파일 링크만 내 사이트의 페이지에 연결해 주면 사용할 수 있다.
> https://apis.map.kakao.com/web/guide/
> https://apis.map.kakao.com/web/sample/ (지도 API로 할 수 있는 예들)
2. 한 지도에 여러 마커들을 표시할 수 있는데, 각 마커의 데이터는 JSON 배열이라는 데이터 구조로 작성을 하면 된다.
3. 워드프레스는 콘텐츠 데이터를 JSON 데이터로 바꿔서 표시해주는 REST API를 제공(since 4.7)하고 있다.
> https://developer.wordpress.org/rest-api/
두 API를 이용해서 안내 문서에 있는 코드들만 잘 활용하면 내가 방문한 모든 여행지를 지도 위에 마커로 표시하는 것까지 구현이 가능했습니다.
기본 구조는 완료가 되었으니 이젠 이걸 보기에도 좋게, 그리고 콘텐츠로 이동할 수 있는 링크도 표시하는 등 부가적인 작업들이 필요하겠지요.
저는 마커들을 겹치지 않게, 지도 레벨이 높은 경우 하라로 뭉쳐서 표시할 수 있는 '마커 클러스터러'를 사용하고, 마커를 클릭하면 그 위에 '글 제목'을 오버레이로 표시하면서 클릭하면 글로 이동이 될 수 있는 것까지를 다음 목표로 잡았습니다.
그런데, 여러 마커들을 표시하는 것까지 완료된 코드에서 마커 클러스터러를 표시하는 것을 적용해 보니, 지도에 마커들이 표시되지 않는 문제가 발생했고, 이번 글은 그다음 과정부터 마커 클러스터러를 표시하는 것을 성공한 과정까지가 되겠습니다.
8. 코어 REST API 주소 대신 커스텀 주소를 만들어서 원하는 데이터를 만드는 것으로 방향 전환 (예: /custom/v1/destination)
9. 그래도 클러스터러 표시 안 되는 문제 > 위도, 경도를 아예 미리 json 데이터에 표시하는 것으로 바꿈 (루프 내에서 카카오 맵 주소 검색하는 것을 X)
10. 이제 클러스터러 표시 OK
'마커들을 클러스터러로 표시하는 예제 그대로를 테스트 페이지에 적용하면 잘 되는데, 왜 계속 잘 진행되던 코드에 클러스터러 표시 부분만 바꾸니 안 되는 것일까?'
수정 시도 1.
혹시 다른 샘플에 힌트가 있는 것인가 하고 관련된 것들을 다시 살펴보면서 테스트를 해 보기 시작합니다.
https://apis.map.kakao.com/web/sample/
각각의 샘플은 모두 문제없이 잘 실행이 되는데, 원인을 알기가 어려웠습니다.
수정 시도 2.
데이터가 샘플과 다른 게 있는가 싶어서 워드프레스 REST API 문서도 살펴보다가, 검색 엔진에도 의지를 해 봅니다. 그중에 심플하지만 매우 유용한 정보를 알려주는 유투버가 있네요. 내가 원하는 데이터만 가져다가 가공해서 새 REST API 주소를 만들어 이용할 수 있다는 점을 알게 됐습니다. (이때 php 데이터는 워드프레스가 알아서 JSON 데이터로 바꿔줌)
> https://www.youtube.com/watch?v=-OsWzDrnrHM
> https://www.youtube.com/watch?v=lAl9m-yCwGA
영상에 소개된 코드대로 내 사이트의 테마 functions.php 또는 별도의 파일에 작성하여 사이트에 적용해 보니, 잘 적용이 되네요. 이제 내가 만든 REST API 주소를 열면 원하는 데이터를 표시할 수 있게 됐습니다.
다음으로 필요한 데이터를 새 REST API 주소에 표시하는 작업이 필요합니다. 이때 워드프레스에서 데이터베이스에 저장된 콘텐츠 데이터를 가져오는 부분은 'WP_Query'를 이용하면 됩니다.
커스텀 쿼리를 만들고, '$custom_query_filtered'라는 이름의 배열에 데이터를 하나씩 담은 다음, 마지막으로 return 해 주면, 워드프레스는 내가 만든 '~/wp-json/custom/v1/destination' 이라는 주소에 방금 리턴한 내용을 JSON 데이터로 만들어 줍니다.
그런데, 새로운 REST API 주소에서 JSON 마커 데이터를 얻는 것으로 바꾸고, 맵 테스트 페이지를 열어봐도 클러스터러는 표시가 되질 않았습니다. 데이터는 분명 잘 넘어왔고, markers라는 배열에 마커들이 하나씩 잘 저장은 되는 것 같은데, 클러스터러를 처리하는 과정에서 기존과 마찬가지로 길이가 0으로 제대로 처리가 되지 않는 것 같습니다.
수정 시도 3.
주소 검색 부분을 다음 지도 API 라이브러리로 하지 말고, 아예 미리 위도 경도 좌표로 저장해서 REST API 주소에서 바로 불러다 쓰는 거로 변경했습니다. 딱 클러스터러 샘플에 나와 있는 구조대로만 적용해 보는 것이었죠.
장소 부가 정보를 입력하는 필드를 일반 텍스트 필드가 아닌 'Google Map' 필드 타입으로 만들면 장소(destination) 편집하는 곳에 주소 검색이 가능한 구글 지도가 하나 표시되는 걸 볼 수 있습니다. 여기서 주소를 입력하여 정확한 위치를 검색한 다음 저장하면, 테스트 주소뿐 아니라 위도 경도를 포함한 세부 주소 정보까지 알아서 저장이 되는 걸 볼 수 있습니다.
(※ 구글 지도 필드는 ACF 플러그인 개발자가 구글 지도 API를 가지고, 어드민에서 주소 검색 기능을 쓸 수 있게 그리고 포스트의 메타 정보로 저장이 되도록 개발을 해 놓은 것)
이제 맵을 컨트롤 하는 js 코드 중에서 카카오 지도 API 라이브러리로 주소를 검색하는 부분 대신, JSON 데이터에 이미 적힌 위도 경도 데이터를 그대로 사용하는 것으로 변경합니다. 이제야 클러스터러 표시가 제대로 표시되었습니다.
임시 테스트 페이지
> https://oksdev-map.tk/map-test/
카카오 지도의 기능을 순차적으로 넣다 보니, 주소 검색을 클러스터러 표시와 합쳐서 이용하는 것까지 이어졌었는데, 이 둘은 왜인지는 몰라도 조합이 잘 안 되는 것 같습니다. 덕분에 삽질의 과정이 있었지만 REST API를 조금 더 활용할 수 있는 방법도 찾은 것 같습니다.
이제 다음 할 일은 마커들 위에 글로 연결될 수 있는 타이틀 링크를 표시하는 부분이 되겠습니다.
다음으로...
