GPS 위치기반
지도 API 설정, GPS 게시판 생성, 위치 입력 게시글 및 지도/목록 위젯 사용 방법입니다. (유료 플러그인)
GPS 위치기반
경로: 관리자 > GPS
관련 경로: 관리자 > 게시판 / 관리자 > 메뉴 / 관리자 > 위젯
개요
GPS 위치기반 플러그인은 게시글에 주소와 좌표를 저장하고, 지도에서 가까운 장소 또는 등록된 매장을 보여주는 기능입니다.
주로 아래 용도로 사용합니다.
- 지역 맛집/매장 지도
- 제휴업체 위치 안내
- 오프라인 지점 소개
- 방문 후기 지도 게시판
- 근처 업체 목록 위젯
플러그인 활성화 후 추가되는 것
| 위치 | 추가 내용 |
|---|---|
| 관리자 > GPS | 지도 종류와 API Key 설정 페이지 |
| 관리자 > 게시판 | 게시판 유형에 GPS 지도/GPS 목록 사용 가능 |
| 글쓰기 | 위치 정보 입력 영역 추가 |
| 게시판 목록 | GPS 지도형 게시판은 지도 중심으로 표시 |
| 게시글 상세 | 저장된 위치를 지도에 표시 |
| 위젯 | GPS 지도/GPS 목록 위젯 사용 가능 |
플러그인이 꺼져 있으면 지도 설정, 위치 입력, GPS 위젯이 정상 표시되지 않습니다.
전체 설정 순서
- 관리자 > GPS에서 지도 종류를 선택합니다.
- 선택한 지도 서비스의 API Key를 입력합니다.
- 관리자 > 게시판에서 GPS용 게시판을 만듭니다.
- 관리자 > 메뉴에서 해당 게시판을 메뉴에 연결합니다.
- 게시글 작성 시 위치 정보를 입력합니다.
- 필요하면 관리자 > 위젯에서 GPS 지도/목록 위젯을 추가합니다.
지도 종류 선택
관리자 > GPS에서 지도 종류를 선택합니다.
| 지도 종류 | 특징 | 추천 상황 |
|---|---|---|
| Kakao Map | 한국 주소 검색과 우편번호 검색에 적합 | 국내 사이트, 한국 매장 지도 |
| Google Maps | 해외 주소/다국어 주소에 적합, 지도 클릭으로 위치 지정 가능 | 해외 사이트, 글로벌 서비스 |
지도 종류를 바꾸면 글쓰기 위치 입력, 지도 게시판, GPS 위젯, 게시글 상세 지도에서 사용하는 지도도 같이 바뀝니다.
Kakao Map 설정
Kakao Map을 사용할 때는 Kakao JavaScript 키가 필요합니다.
설정 방법
- Kakao Developers에 접속합니다.
- 애플리케이션을 생성하거나 기존 앱을 선택합니다.
- 플랫폼 > Web에 사이트 도메인을 등록합니다.
- JavaScript 키를 복사합니다.
- 와플보드 관리자 > GPS로 이동합니다.
- 지도 종류를
Kakao Map으로 선택합니다. Kakao Map API Key에 JavaScript 키를 입력합니다.- 저장 후 GPS 게시판 글쓰기 화면에서 주소 검색이 되는지 확인합니다.
Kakao 도메인 등록 주의
Kakao 지도는 등록된 Web 도메인에서만 동작합니다.
예시 등록 도메인:
https://example.comhttps://www.example.com- 개발 확인용이면
http://localhost:3000
운영 도메인과 www 도메인을 둘 다 쓴다면 둘 다 등록하는 것을 권장합니다.
Google Maps 설정
Google Maps를 사용할 때는 Google Maps JavaScript API Key가 필요합니다.
필요한 API
Google Cloud Console에서 아래 API가 켜져 있어야 합니다.
- Maps JavaScript API
- Places API
- Geocoding API
설정 방법
- Google Cloud Console에서 프로젝트를 선택합니다.
- API 및 서비스에서 필요한 API를 활성화합니다.
- 사용자 인증 정보에서 API Key를 생성합니다.
- HTTP referrer 제한에 사이트 도메인을 등록합니다.
- 와플보드 관리자 > GPS로 이동합니다.
- 지도 종류를
Google Maps로 선택합니다. Google Maps API Key에 키를 입력합니다.- 글쓰기 화면에서 주소 검색 및 지도 클릭 위치 지정이 되는지 확인합니다.
Google referrer 제한 예시
https://example.com/*https://www.example.com/*- 개발용:
http://localhost:3000/*
GPS 게시판 만들기
관리자 > 게시판에서 GPS용 게시판을 생성하거나 기존 게시판 유형을 변경합니다.
게시판 유형
| 유형 | 화면 방식 | 사용 예시 |
|---|---|---|
| GPS 지도 | 게시판 진입 시 지도에 마커를 표시 | 매장 지도, 업체 지도, 지역 서비스 |
| GPS 목록 | 일반 목록처럼 보되 주소 정보를 함께 활용 | 매장 리스트, 위치 기반 후기 목록 |
GPS 지도 유형은 게시판 메인에 지도가 표시되고, 게시글들은 마커로 나타납니다.
GPS 목록 유형은 일반 게시판 목록에 가깝지만 글쓰기/상세에서 위치 정보를 사용할 수 있습니다.
게시판 생성 후 할 일
- 게시판 이름을 입력합니다. 예:
매장 지도,제휴업체,방문 후기 - 슬러그를 입력합니다. 예:
stores,partners,map - 유형을
GPS 지도또는GPS 목록으로 선택합니다. - 권한, 포인트, 말머리 등 일반 게시판 설정을 필요에 맞게 조정합니다.
- 저장합니다.
메뉴에 연결하기
GPS 게시판을 만들었으면 메뉴에 연결합니다.
- 관리자 > 메뉴로 이동합니다.
- 메뉴를 추가합니다.
- 메뉴 유형을
게시판으로 선택합니다. - 카테고리에서 GPS 게시판을 선택합니다.
- 메뉴명을 입력합니다. 예:
매장 지도 - 저장합니다.
이제 방문자는 메뉴를 통해 GPS 게시판에 접근할 수 있습니다.
위치 게시글 작성하기
GPS 유형 게시판에서 글을 작성하면 위치 정보 입력 영역이 추가됩니다.
입력 항목
| 항목 | 설명 |
|---|---|
| 주소 검색 | Kakao 또는 Google 지도에서 주소를 검색 |
| 우편번호 | Kakao 주소 검색 시 자동 입력 |
| 주소 | 검색한 기본 주소 |
| 상세 주소 | 층, 호수, 매장명 등 추가 주소 |
| 지도 위치 | 위도/경도 좌표 저장 |
Kakao Map 사용 시
검색버튼을 누릅니다.- 다음/카카오 주소 검색 창에서 주소를 선택합니다.
- 우편번호, 주소, 좌표가 자동 입력됩니다.
- 상세 주소를 입력합니다.
- 제목과 본문을 작성 후 저장합니다.
Google Maps 사용 시
- 주소 검색창에 주소를 입력합니다.
검색버튼을 누릅니다.- 지도에 마커가 표시됩니다.
- 필요하면 지도를 클릭해 위치를 직접 조정합니다.
- 상세 주소를 입력하고 저장합니다.
방문자 화면에서 보이는 방식
GPS 지도 게시판
GPS 지도 게시판에 들어가면 등록된 위치 게시글이 지도 마커로 표시됩니다.
- 가까운 영역의 게시글을 지도에 표시합니다.
- 마커가 많으면 클러스터로 묶입니다.
- 마커 또는 정보 카드를 누르면 게시글 상세로 이동합니다.
- 게시글의 첫 번째 이미지가 있으면 정보 카드에 썸네일로 표시됩니다.
게시글 상세
위치가 저장된 게시글 상세에는 지도 박스가 표시됩니다.
- 저장된 좌표에 마커가 표시됩니다.
- Kakao/Google 중 관리자에서 선택한 지도 종류로 표시됩니다.
- API Key가 없으면
API Key가 필요합니다안내가 표시됩니다.
GPS 목록/위젯
GPS 목록 위젯은 게시글 목록에 주소 배지를 함께 보여줄 수 있습니다.
GPS 지도 위젯은 특정 GPS 게시판의 마커 지도를 메인/사이드바에 노출할 때 사용합니다.
위젯으로 지도 보여주기
메인 페이지나 사이드바에 지도/목록을 넣고 싶으면 위젯을 사용합니다.
- 관리자 > 위젯으로 이동합니다.
- 위젯 추가를 누릅니다.
- 유형을
GPS 지도또는GPS 목록으로 선택합니다. - 표시할 GPS 게시판을 선택합니다.
- 위치(메인/사이드바), 순서, 크기를 설정합니다.
- 저장합니다.
위젯은 GPS 플러그인이 활성화되어 있고 API Key가 정상일 때 표시됩니다.
Kakao Map과 Google Maps 차이
| 항목 | Kakao Map | Google Maps |
|---|---|---|
| 국내 주소 검색 | 좋음 | 가능 |
| 우편번호 검색 | 지원 | 직접 우편번호 입력 없음 |
| 해외 주소 | 제한적 | 좋음 |
| 지도 클릭 위치 지정 | 제한적 | 지원 |
| 필요한 도메인 설정 | Kakao Web 플랫폼 | Google HTTP referrer |
| 추천 | 한국 커뮤니티/매장 | 해외/다국어 서비스 |
국내 사이트는 보통 Kakao Map을 먼저 추천합니다. 해외 주소가 많거나 다국어 지도가 필요하면 Google Maps를 선택하세요.
자주 생기는 문제
지도 대신 API Key 안내가 나옵니다
- 관리자 > GPS에서 선택한 지도 종류에 맞는 API Key가 입력되어 있는지 확인합니다.
- Kakao Map 선택 시 Kakao 키가 필요합니다.
- Google Maps 선택 시 Google 키가 필요합니다.
Kakao 주소 검색이 안 됩니다
- Kakao JavaScript 키를 넣었는지 확인합니다.
- Kakao Developers > 플랫폼 > Web에 현재 도메인이 등록되어 있는지 확인합니다.
https://www.example.com과https://example.com을 둘 다 사용하는 경우 둘 다 등록합니다.- 브라우저 콘솔에 도메인 오류가 있는지 확인합니다.
Google 지도 로딩이 안 됩니다
- Maps JavaScript API가 활성화되어 있는지 확인합니다.
- Places API, Geocoding API도 켜져 있는지 확인합니다.
- API Key의 HTTP referrer 제한에 현재 도메인이 포함되어 있는지 확인합니다.
- 결제 계정이 필요한 Google Cloud 프로젝트인지 확인합니다.
마커가 지도에 안 보입니다
- GPS 게시판 글쓰기에서 위치 정보를 저장했는지 확인합니다.
- 위도/경도가 없는 기존 게시글은 지도 마커로 표시되지 않습니다.
- 글이 삭제되었거나 다른 게시판에 작성된 글인지 확인합니다.
- 지도 화면을 조금 이동/확대해 다시 로딩해봅니다.
GPS 게시판인데 일반 목록처럼 보입니다
- 게시판 유형이
GPS 지도인지 확인합니다. GPS 목록유형은 목록형으로 보이는 것이 정상입니다.- 관리자 > 게시판에서 해당 게시판의 유형을 다시 확인합니다.
운영 추천 방식
- 국내 서비스면 Kakao Map으로 시작합니다.
- 운영 도메인과 www 도메인을 API 콘솔에 모두 등록합니다.
- 먼저 테스트 게시글 1개를 작성해 주소/좌표/상세 지도 표시를 확인합니다.
- 매장형 데이터는 제목에 매장명, 본문 첫 이미지에 대표 이미지를 넣으면 지도 카드가 보기 좋아집니다.
- 같은 지역에 마커가 많으면 GPS 지도 게시판, 적으면 GPS 목록 게시판이 관리하기 쉽습니다.
- 메인에는 GPS 지도 위젯, 사이드바에는 GPS 목록 위젯을 조합하면 좋습니다.
빠른 체크리스트
- GPS 플러그인 활성화
- 관리자 > GPS에서 지도 종류 선택
- 선택한 지도 API Key 입력
- API 콘솔에 사이트 도메인 등록
- GPS 지도 또는 GPS 목록 게시판 생성
- 메뉴에 게시판 연결
- 테스트 게시글 작성 후 위치 저장 확인
- 지도 마커와 게시글 상세 지도 확인
- 필요 시 GPS 위젯 추가