매장·지점·대리점을 네이버 지도에 핀으로 보여 주고, 옆 목록과 함께 움직이는 매장찾기 플러그인입니다. 주소만 넣으면 지도 위치가 자동으로 잡히고, 멀리 보면 숫자 원으로 묶이고 가까이 보면 이름표가 붙어 매장이 수백 곳이어도 깔끔합니다.
01주요 기능
이 플러그인으로 할 수 있는 일입니다.
- 네이버 지도와 목록 연동
지도를 움직이면 목록에는 지금 지도에 보이는 매장만 남고, 「지도 안 매장 12곳」처럼 개수가 바뀝니다. 목록을 누르면 지도가 그 위치로 이동합니다.
- 묶음 표시 · 이름표
멀리 보면 가까운 매장끼리 숫자 원 하나로 묶이고, 원을 누르면 그 지역으로 확대됩니다. 가까이 보면 핀 아래에 매장 이름이 붙습니다.
- 정보 카드
핀을 누르면 사진·이름·주소·전화·영업시간과 상세보기·네이버 지도에서 보기(길찾기) 버튼이 있는 카드가 뜨고, 목록의 그 매장이 강조됩니다.
- 분류 탭 · 검색 · 내 위치
서울/경기, 직영점/가맹점처럼 분류 탭으로 거르고, 매장 이름·지역으로 검색합니다. 내 위치 버튼으로 주변 매장을 찾습니다(https 사이트).
- 주소만 넣으면 위치 자동
관리자에서 주소 검색으로 주소를 고르면 지도 위치가 자동으로 잡히고, 어긋나면 핀을 끌어 옮깁니다. 주소만 넣고 저장해도 위치를 찾아 줍니다.
- 한 번에 위치 찾기
주소는 있는데 위치가 없는 매장을 한꺼번에 변환하고, 주소를 못 찾은 곳은 이름을 알려 줍니다.
- 매장마다 상세페이지
매장마다 작은 지도, 분류·주소·전화·영업시간, 네이버 지도에서 보기·전화하기·바로가기 버튼이 있는 상세페이지가 생기고, 본문에 자유롭게 소개를 씁니다.
- 부르는 이름 바꾸기
매장 대신 지점·대리점·가맹점·장소·병원 등으로 바꾸면 관리자와 화면 문구가 모두 그 이름으로 바뀝니다.
- 많아도 빠르게
매장이 많으면 지도를 움직일 때 보이는 지역만 다시 불러와 수천 곳도 가볍게 보여 줍니다.
02방문자에게는 이렇게 보입니다
- 위쪽에 '전체'와 분류 탭, '매장 이름, 지역 검색' 검색창
- 왼쪽(또는 오른쪽) 목록: 「지도 안 매장 12곳 / 전체 48」 개수와 '전체 보기' 버튼, 사진·이름·주소·전화가 있는 매장 줄
- 오른쪽 네이버 지도: 포인트 색 핀(또는 회사 로고 핀), 숫자 묶음 원, 확대하면 이름표
- 핀을 누르면 지도 위에 뜨는 정보 카드(영업시간, 상세보기, 네이버 지도에서 보기)
- 지도 오른쪽 아래 내 위치 버튼
03관리자에서 이렇게 설정합니다
코딩 없이 관리자 화면에서 고르고 적기만 하면 됩니다.
- 네이버 지도 키 넣기
네이버 클라우드 플랫폼 콘솔 › Maps › Application에서 Dynamic Map과 Geocoding을 체크해 등록하고, 'DF 매장찾기 › 설정 › 네이버 지도 키'에 Client ID와 Client Secret을 붙여 넣습니다. 방법은 '사용법' 탭에 순서대로 있습니다.
- 분류 만들기
'DF 매장찾기 › 분류'에서 서울/경기, 직영점/가맹점 같은 분류를 만듭니다. 만든 순서대로 탭에 나옵니다.
- 매장 등록
'매장 관리 › + 매장 등록'에서 이름을 쓰고 '주소 검색'으로 주소를 고르면 위치가 자동으로 잡힙니다. 전화번호·영업시간·한 줄 소개·바로가기 링크, 오른쪽 대표 이미지와 분류를 넣고 '공개'를 누릅니다.
- 화면 정하기
'설정'에서 레이아웃(박스형/전체화면형), 높이, 목록 넓이와 위치, 처음 화면, 확대 수준, 포인트 색, 핀 이미지, 목록·카드에 보일 항목을 정하고 '설정 저장'을 누릅니다.
- 페이지에 넣기
매장찾기를 보여 줄 페이지에
한 줄을 넣습니다.
관리자 설정 화면 예시
04설정할 수 있는 항목
관리자 화면에서 바꿀 수 있는 옵션을 모두 정리했습니다.
| 네이버 지도 키 (Client ID · Client Secret) | 지도를 띄우고 주소를 위치로 바꿀 때 씁니다. Client Secret은 서버에서만 쓰고 방문자 화면에는 나가지 않습니다.기본값: 비어 있음 |
|---|---|
| 부르는 이름 | 매장·지점·대리점·가맹점·매물·장소·병원 등 화면과 관리자 문구에 쓰일 이름입니다.기본값: 매장 |
| 상세페이지 주소 | 매장 상세페이지 주소 앞부분(영문)입니다.기본값: store |
| 레이아웃 | 박스형(페이지 안에 정해진 높이) 또는 전체화면형(지도 시작 위치부터 창 아래 끝까지)기본값: 박스형 |
| 높이 | PC 지도 높이와 휴대폰 지도 높이(px)입니다.기본값: PC 640 · 휴대폰 360 |
| 목록 | 목록 넓이(px)와 위치(왼쪽/오른쪽)기본값: 380px · 왼쪽 |
| 처음 화면 | 등록된 매장이 모두 보이도록 자동으로 맞추기. 끄면 기본 위치와 처음 확대 수준으로 시작합니다.기본값: 켬 (권장) |
| 기본 위치 | 주소로 찾거나 위도·경도를 넣습니다.기본값: 서울시청 |
| 확대 수준 | 처음 / 묶어 보이기(이하) / 이름표 보이기(이상) / 목록 클릭 시. 숫자가 클수록 가까이 확대됩니다.기본값: 12 / 13 / 15 / 16 |
| 포인트 색 | 핀, 묶음 원, 선택된 분류 탭, 버튼 색입니다.기본값: #1f6fff |
| 핀 이미지 | 회사 로고 핀 등 PNG(가로 30~40px)를 올립니다. 비우면 포인트 색 기본 핀입니다.기본값: 비어 있음 |
| 목록·카드 항목 | 사진, 주소, 전화번호, 영업시간(카드), 상세보기 버튼, 네이버 지도에서 보기(길찾기)기본값: 모두 켬 |
| 도구 | 분류 탭, 검색창, 내 위치 버튼(https 사이트에서만 보임)기본값: 모두 켬 |
| 한 번에 불러오기 | 등록 수가 이보다 적으면 처음에 한 번만 불러오고, 많으면 지도에 보이는 지역만 다시 불러옵니다.기본값: 2000개 |
05페이지에 넣는 방법
원하는 페이지 본문에 아래 숏코드를 붙여 넣으면 됩니다.
06추천 대상 · 휴대폰 화면
이런 곳에 알맞습니다
- 직영점·가맹점·대리점 위치를 한 화면에 보여 주려는 프랜차이즈·제조사
- 전국 판매처나 시공점을 지역별로 안내하는 회사
- 지점이 여러 곳인 병원·학원·센터
- 매장 목록을 표나 이미지로만 올려 두어 찾기 어려웠던 곳
휴대폰에서는
휴대폰에서는 지도가 위, 목록이 아래로 쌓여 보입니다. 핀을 누르면 정보 카드가 아래에 뜨고, 카드에 가리지 않도록 핀이 위쪽으로 옮겨집니다.
07구매 전에 많이 묻는 질문
네이버 지도 키는 따로 받아야 하나요?
네. 네이버 클라우드 플랫폼에 가입해 결제 수단을 등록하고, Maps Application을 만들 때 Dynamic Map과 Geocoding을 체크한 뒤 Client ID·Client Secret을 설정에 넣습니다. Web 서비스 URL에는 사이트 주소(www 있는·없는 주소 둘 다)를 넣어 두세요.
지도 이용 요금이 드나요?
요금과 무료 이용량은 네이버 정책에 따라 바뀝니다. 사용 전에 네이버 클라우드의 Maps 요금 안내를 확인해 주세요. 플러그인은 매장이 많아도 필요한 만큼만 불러오도록 만들어져 있습니다.
매장 위치를 일일이 위도·경도로 넣어야 하나요?
아니요. 주소만 고르면 위치가 자동으로 잡히고, 조금 어긋나면 관리자 지도에서 핀을 끌어 옮기면 됩니다. 이미 주소만 넣어 둔 매장은 설정 › 도구의 '위치 한번에 찾기'로 한꺼번에 변환합니다.
매장이 수백 곳이어도 괜찮나요?
괜찮습니다. 멀리 보면 숫자 원으로 묶이고, 등록 수가 많으면 지도에 보이는 지역만 다시 불러와 느려지지 않습니다.
매장이 아니라 지점·대리점이라고 부르고 싶어요.
설정의 '부르는 이름'을 바꾸면 '지도 안 지점 12곳', '지점 등록'처럼 화면과 관리자 문구가 모두 바뀝니다.
08알아 두세요
- ON 코어가 먼저 설치·활성화되어 있어야 작동합니다.
- 네이버 지도 Client ID를 넣기 전에는 지도가 나오지 않습니다(관리자에게만 안내 문구가 보입니다).
- 내 위치 버튼은 https 사이트에서만 보입니다.
- 지도에 나오는 내용이 관리자와 다르면 설정 › 도구의 '다시 정리'를 누르세요.
