워드프레스 디렉터리 플러그인 Directories Pro: 구글 지도 연동하기

워드프레스 정보를 제공하는 블로그 Avada 2023. 4. 13. 00:26 • 댓글: 개

워드프레스에서 디렉터리 또는 리스팅 사이트를 구축하려는 경우 ListingPro와 같은 디렉터리 전용 워드프레스 테마를 사용할 수 있습니다. 최근 회원사들을 소개하는 사이트를 구축하는 작업에 참여하면서 ListingPro를 테스트해 보았지만, 이 테마를 제대로 사용하려면 설명서를 먼저 숙지해야 하는 등 시간이 다소 필요한 것 같습니다. 빠른 기간 내에 사이트를 완성해야 하기 때문에 대안을 모색하다 Directories Pro라는 디렉터리/리스팅 플러그인을 사용하여 사이트를 완성했습니다.

Directories Pro는 다소 직관적이라서 기본적인 기능은 쉽게 이해하고 응용할 수 있어 괜찮은 것 같습니다. Directories Pro에서는 구글 맵 API 키를 입력하여 구글 지도를 표시할 수 있습니다.

워드프레스 디렉터리 플러그인 Directories Pro: 구글 지도 연동하기

워드프레스 Directories Pro 플러그인에서 구글 지도를 표시하려면 관리자 페이지에서 Directories » Settings » Map을 클릭합니다.

Map provider에 Google Maps를 선택하고 API key에 구글 맵 API 키를 입력합니다. 구글 맵 API를 생성하려면 먼저 결제 정보를 입력해야 합니다. Google Map API 키를 올바르게 생성하였다면 Directores Pro의 설정 페이지에 해당 API 키를 입력하고 리스팅 글 포스팅 시 주소와 함께 위도/경도를 올바르게 입력해야 지도가 로드됩니다.

잘못된 API 키가 입력되었거나, 구글 맵 API 설정에서 HTTP 리퍼러에 해당 도메인을 등록하지 않으면 구글 지도 로딩 에러가 발생합니다. API 키가 잘못되면 아래 그림과 같이 "죄송합니다. 문제가 발생했습니다. Google 지도가 제대로 로드되지 않았습니다. 자바스크립트 콘솔에서 자세한 기술 정보를 확인하세요." 오류 메시지가 표시됩니다.

리스팅 포스트에 구글 지도를 표시하려면 Directories 메뉴를 클릭하고 해당 디렉터리의 설정 아이콘(톱니바퀴 모양의 아이콘)을 클릭합니다.

Content Types 탭을 선택하고 Listing의 Edit 버튼을 클릭합니다.

계속하여 Manage Displays 탭을 선택합니다.

원하는 곳에 엘리멘터 추가 아이콘(더하기 기호)을 눌러 Location을 선택합니다(Locations가 아님).

엘리멘트 편집 화면에서 Field renderer 필드 옵션에 Map renderer를 선택합니다.

지도 높이와 지도 마커를 커스텀할 수 있습니다. Default zoom level(기본 확대/축소 레벨)을 조정하여 지도가 얼마나 확대되어 표시될 것인지를 선택할 수 있습니다. Enable directions search를 선택하면 길 찾기 검색 기능이 활성화됩니다.

지도 높이는 설정할 수 있지만 지도 너비는 설정하는 옵션이 없습니다. CSS를 사용하여 지도 너비를 조정할 수 있습니다. 다음 그림은 지도 폭을 100%로 설정하는 예시입니다.