캠페이너스에서는 지도를 삽입하는 방법이 크게 3가지가 있습니다.가장 간단한 이미지 지도부터, 인터랙션이 가능한 퍼가기 지도,API 키를 활용한 고급 지도까지 상황에 맞게 활용하실 수 있어요.

별도의 설정이나 코드 없이 주소만 입력하면 자동으로 지도 이미지가 생성되는 방식이에요.

  • 단순한 위치 안내(주소 하나만 보여주면 되는 경우)

  • 인터랙션(확대/축소, 드래그)이 필요 없는 경우

  1. 캠페이너스 관리자 페이지 상단에서 디자인모드로 들어갑니다.

  2. 지도를 넣을 메뉴(페이지)로 이동합니다.

  3. 좌측 상단 [위젯 추가] 버튼 → 단일 지도 위젯을 선택합니다.

  4. 단일 지도 위젯에 마우스를 올리고, 우측의 설정을 클릭합니다.

  5. 지도 종류 → 이미지 지도를 선택합니다.

  6. 주소 입력란에서 도로명 주소 검색 → 해당 위치 선택

  7. 저장 후 미리보기/게시하기

입력한 주소 기반으로 자동으로 ‘정적인 지도 이미지’가 표시됩니다.

지도 드래그, 확대/축소, 마커 표시 등 기능성 지도를 보여주고 싶을 때 사용해요.API 키 없이도 퍼오기(Embed) 기능만으로 삽입이 가능합니다.

  • 지도 이동/확대/축소 필요

  • 매장 위치, 행사 위치를 마커로 표시하고 싶은 경우

  • 모바일에서도 자유롭게 조작 가능한 지도가 필요한 경우

  1. 구글 지도(https://maps.google.com) 접속

  2. 주소/장소 검색

  3. 왼쪽 메뉴 또는 장소 정보에서 [공유] 클릭

  4. [지도 퍼가기] 탭에서 HTML iframe 코드 복사

  5. 캠페이너스 디자인모드 → 위젯 추가 → 코드 위젯 추가

  6. 코드 위젯 설정에서 복사한 HTML 코드 붙여넣기

  7. 저장 후 게시

  1. 카카오맵(https://map.kakao.com) 접속

  2. 주소/장소 검색

  3. 우측의 [공유하기] 아이콘 클릭

  4. HTML 태그 복사 또는 소스 생성하기 → 퍼가기 태그 복사

  5. 캠페이너스 디자인모드 → 코드 위젯 추가

  6. 복사한 HTML 코드 붙여넣기 → 저장 → 게시

구글 Maps Platform API 키를 연결하면단일 지도 위젯/지도 게시판 위젯에서 지도 종류를 Google 지도로 변경해 사용할 수 있어요.

  • 사이트에서 여러 장소를 지도 게시판으로 관리해야 하는 경우

  • 동적 지도 기능이 필요할 때

  • 마커 작동이나 스타일 적용이 필요한 경우

  1. 관리자 페이지 → 환경설정

  2. 소셜 로그인·지도·공유 → 구글 지도 메뉴

  3. Google Maps Platform에서 발급한 API 키 등록

  4. 디자인모드에서 지도 위젯 선택 → 지도 종류 = Google 지도

최근 네이버 지도는 신규 API 발급 및 무료 사용 정책이 대폭 제한되었습니다.캠페이너스에서는 신규 지도를 설정하는 경우

  • 이미지 지도,

  • 구글 지도 퍼오기,

  • 카카오맵 퍼오기

방식을 사용하는 것을 권장드립니다.

상황

추천 방식

주소만 간단히 표시

이미지 지도(단일 지도 위젯)

확대/축소·드래그 가능한 지도

구글/카카오 퍼오기(코드 위젯)

여러 지점을 지도 게시판으로 관리

Google API 연동 + 지도 위젯

네이버 지도 사용

신규 API 제한으로 비추천