#2. 워드프레스 포스트에 적은 주소로 마커를 표시하기
카카오 지도 API & 워드프레스 REST API
이전 글 [#1]에서 다음 지도 API를 이용하는 설정을 마쳤습니다. 이젠 지도 API를 워드프레스 콘텐츠와 연결해서 이용하는 것을 진행할 차례입니다. 아래 히스토리까지가 이번 글의 내용이 되겠습니다.
4. 장소들 rest api 주소 (/wp-json/wp/v2/destination)
5. 카카오 지도에 표시할 주소를 ACF 필드로 입력 (REST API 노출 옵션 있음)
6. 비로그인 사용자는 REST API 주소 이용 못 하게 막음 (플러그인 이용)
7. 기본 CPT(destination) RestApi 주소로 입력된 주소를 자동 변환, 여러 개의 마커 표시까지 성공. but 클러스터러(지도가 확대되면 하나로 뭉쳐 보이게 하는 방식) 표시가 제대로 안 됨
먼저, 지도 위에 여러 개의 마커들을 표시하는 것부터 테스트를 해 봅니다.
> https://apis.map.kakao.com/web/sample/multipleMarkerImage/
여러 개의 마커를 표시하는 지도 샘플에서 Javascript 부분을 복사하여 지도 컨트롤을 위해 만들어둔 js 파일에 그대로 붙여 넣기를 합니다. 그다음 테스트 페이지를 열어 보면 샘플 사이트와 같이 내 사이트 지도에도 마커들이 여러 개 표시되는 걸 볼 수 있습니다.
여러 개의 마커들의 정보는 어떻게 작성이 돼 있을까요? 아래와 같이 JSON 배열이라는 데이터 구조를 이용해서 작성이 돼 있네요.
※ JSON 배열 ?
JSON 배열은 대괄호([])로 둘러쌓아 표현합니다.
또한, JSON 배열은 쉼표(,)를 사용하여 여러 JSON 데이터를 포함할 수 있습니다.
※ JSON 구조
JSON은 자바스크립트의 객체 표기법으로부터 파생된 부분 집합입니다.
따라서 JSON 데이터는 다음과 같은 자바스크립트 객체 표기법에 따른 구조로 구성됩니다.
1. JSON 데이터는 이름과 값의 쌍으로 이루어집니다.
2. JSON 데이터는 쉼표(,)로 나열됩니다.
3. 객체(object)는 중괄호({})로 둘러쌓아 표현합니다.
4. 배열(array)은 대괄호([])로 둘러쌓아 표현합니다.
이후 해야 할 거라면, 마커들에 대한 정보에 해당하는 데이터만 문법에 맞게 작성을 하면, 나머지는 샘플에 적힌 코드들이 알아서 마커를 잘 표시해 줄 겁니다.
이제 워드프레스의 포스트 작성 시 주소 정보를 같이 저장했다고 하면 이 정보를 가져다가 문법에 맞게 적는 작업이 필요합니다. 그런데 워드프레스는 php 기반입니다. php를 통해 데이터를 가져와서 다시 javascript를 위한 JSON 구조로 데이터를 가공하고... 뭔가 복잡하네요.
이걸 한방에 해결을 해 줄 수 있는 방법이 이미 있는데, 그게 바로 워드프레스의 REST API입니다. 워드프레스는 버전 4.7부터(현재 6.0.1) 워드프레스의 거의 모든 콘텐츠와 정보들을 json 형태로 불러올 수 있는 방법을 제공하고 있습니다.
> https://developer.wordpress.org/rest-api/changelog/
> https://developer.wordpress.org/rest-api/
만약 내 사이트가 워드프레스로 만들어져 있고, 별도로 REST API를 차단하는 조치를 하지 않았다면, 사이트 도메인 주소 끝에 '~~~/wp-json/wp/v2/posts'라고 입력해 보세요. 사이트의 글이 json 배열 형태로 표시되는 걸 볼 수 있습니다. 데이터가 한 줄로 이어져서 구조를 잘 못 알아보겠다면, 브라우저에 확장 프로그램으로 'JSON Viewer' 같은 것을 설치하고 보면 구조가 잘 보입니다.
REST API를 활용하는 방법에 대해서는 워낙 내용이 방대해서 관련 문서를 참고해 보시는 게 좋을 듯하고, 일단 '데이터를 별도의 가공 없이 워드프레스가 알아서 JSON 데이터로 만들어 준다!' 이거만 여기서 확인하면 되겠습니다.
여기까지 내용을 한 번 정리하면,
- 다음 지도 API를 이용해서 여러 개의 마커를 표시할 수 있음
- 마커들에 대한 정보는 JSON 배열로 작성
- 워드프레스의 콘텐츠 데이터를 JSON 배열로 볼 수 있는 방법이 있음
이렇게 됩니다.
저는 방문했던 장소들을 콘텐츠로 작성을 하기 위해, 워드프레스의 기본 글이나 페이지가 아닌 별도의 포스트 타입을 만들어서 작성을 했습니다. 코딩 대신 'CPT UI'라는 플러그인을 설치해서 장소(destination)이라는 포스트 타입을 만들어 봤습니다. 아래쪽 옵션은 거의 디폴트 값들이라 크게 신경 쓰지 않아도 되는데, 옵션을 쭉 내려보면 REST API에 보일 거냐라는 옵션을 볼 수 있습니다. 기본값이 TRUE네요. 장소들에 대한 콘텐츠들을 작성한 다음 REST API 주소를 열어보면, destination이라는 포스트 타입으로 만든 콘텐츠들도 JSON 형태로 잘 표시되는 걸 볼 수 있습니다.
> '~~~/wp-json/wp/v2/(post type 이름)'
다음으로 할 거는 이제 장소(destination)라는 형식의 글을 적을 때 주소 정보를 입력하여 데이터를 일정량 쌓는 겁니다. 지도에 표시할 글들이 있어야 가져다 표시하는 걸 테스트해보겠지요.
글 편집 시 필드를 추가하는 것은 이번에도 코딩으로 추가하는 것 대신 쉽게 'ACF(Advanced Custom Fields)'라는 플러그인을 설치해서 추가해 봤습니다. 필드를 만들 때 아래쪽에 보면 이 필드에 적은 내용도 REST API에서 보여줄 거냐는 옵션이 있습니다. 이걸 'ON'으로 바꾸면 별도의 코딩 없이도 REST API 주소에 같이 노출이 됩니다.
테스트를 위해 100여 개의 장소들을 작성한 다음, REST API 주소를 열어봤습니다. 그런데, 최근 작성한 것부터 총 10개만 표시가 되고, 필요한 정보(타이틀, 주소, 링크 정도) 외에도 너무 많은 정보들을 가져다 보여주네요.
한 번에 불러올 콘텐츠의 개수는 테마의 functions.php와 같은 곳에 코드를 몇 줄 적어주면 'per_page'라는 파라미터를 이용해서 원하는 대로 수를 늘릴 수 있게 됩니다. 데이터를 필터링하는 것은 REST API 문서에 안내된 것과 같이 '?_fields=id,title,link,acf' 형태로 데이터를 가공할 수 있는 방법이 있습니다.
이제 destination 포스트 타입에 대한 REST API 주소 끝에 파라미터들을 추가해서 데이터를 불러와 봅니다.
> '~~~/wp-json/wp/v2/destination?per_page=1000&_fields=id,title,link,acf'
장소들 데이터를 10개가 아닌 모두를 불러올 수 있게 됐고, 데이터도 필요한 몇가지만 필터링을 할 수 있게 됐습니다.
이제 워드프레스의 포스트들에서 JSON 형태로 데이터를 만드는 것까지 완료가 되었으니, 이 정보를 가지고 다음 지도에 마커를 만드는 것을 해 볼 차례입니다.
주소에서 데이터를 받아다가 이용하는 방법은 '마커 클러스터러 사용하기' 샘플을 참고해 보면 알 수 있습니다. jQuery의 get()이라는 Method를 사용해서 이용하는 것이 소개가 돼 있네요. 코드를 복사하여 이용하면 되겠습니다.
JSON 데이터를 얻을 수 있는 워드프레스 REST API주소에서 모든 데이터를 가져다가 data 변수에 저장합니다. > jQuery $.get()
불러온 데이터 속에 들어있는 객체들 개수만큼 반복하면서 주소를 위도, 경도로 변환하여 지도에 마커로 표시합니다. > jQuery.each()
지도 위치를 주소(텍스트)를 통해 검색해서 위도, 경도로 변환할 수 있었던 것은 최초 다음 지도 API 연결 시 키값 다음에 services라는 라이브러리를 추가해 줬기 때문입니다.
> https://apis.map.kakao.com/web/sample/addr2coord/
js 파일에 이 내용을 적고 다시 테스트용 페이지를 열어 보면, 장소들(destination)로 작성된 글에서 ACF로 만든 주소 필드에 주소가 적힌 것들을 다음 지도에 모두 표시를 하는 걸 볼 수 있습니다.
지도가 축소되어서 전국을 보는 레벨이 되면 마커들이 너무 겹쳐 보이게 됩니다. 대신 일정 범위 내 마커들은 뭉쳐서 보이고 몇 개가 뭉쳐진 것인지를 표시하면 더 좋겠지요. 이를 위해 다음 지도 API도 클러스터러 방식을 제공하고 있습니다. > 마커 클러스터러 사용하기
방법 안내상으로는 코드를 약간만 수정하면 될 듯합니다. 순환문을 조금 바꿔서 계속 하나씩 마커를 표시했던 것을, 잠시 markers라는 배열에 담았다가, 최종 'clusterer.addMarkers(markers)'라는 명령으로 다음 지도 API가 알아서 클러스터러로 표시하도록만 바꿔줬습니다.
어라, 지도에 마커들이 표시가 되질 않습니다. 확인을 위해 'console.log()'를 이용해서 markers에 담긴 데이터들을 확인해 보니, 길이가 0이네요. 샘플 코드와 다른 점이라면, 주소를 위도 경도로 변환을 하는 과정만 추가한 것뿐인데...
여기서 막혀서 근 하루를 소비했던 것 같습니다. 샘플 주소의 데이터와 코드 그대로를 붙여 넣으면 그건 잘 나오는데, 대체 왜 표시가 안 되는 것인지. REST API 문서에 카카오 지도 API 문서에 검색 엔진 동원에 다 들여다봐도 해결이 안 되길래, 결국엔 가장 단순한 차이점인 주소 검색 부분 대신 미리 위도 경도 데이터를 글에 저장해 버리는 것으로 바꿔봤습니다. 그러니 잘 표시가 되네요.
그래도 이 방법 저 방법 찾다 보니, 아예 REST API 주소를 내 맘대로 만들 수도 있다는 것도 알게 됐습니다.
다음 글은, 코어 REST API 주소 외에 내가 원하는 데이터만 가져다가 표시할 수 있는 커스텀 REST API 주소 이용, 그리고 지도에 마커 클러스터러가 표시되는 것 완료까지가 될 듯하네요.
다음으로...
