페이지에 구글 지도 삽입하기 (API 설정 불필요)
페이지에 단일 지도 위젯에서 구글 지도를 사용하려면, 앞서 구글 지도 API 설정을 마쳐야 합니다. 이 방법은 설정과정이 다소 번거롭지만, 한 번 설정을 완료하면 다양한 효과 및 기능을 편리하게 사용 가능하다는 장점이 있습니다.
만약 지도 API 설정에 어려움을 느끼거나 기본 구글 지도만으로 충분한 경우, 구글의 지도 공유하기 기능을 사용할 수 있습니다. 이 방법은 개인이 지도를 제어할 수는 없지만, 설치가 간단합니다.
참고: 지도 게시판 위젯에서 지도를 사용하려면 네이버 또는 구글 지도 API 설정을 필수로 완료해야 합니다.
삽입방법
1단계: 구글 지도 임베드 코드 복사하기
- 구글 지도에 접속합니다.
- 왼쪽 상단 검색필드에 검색할 장소명 또는 주소를 입력하고, 키보드 Enter를 눌러줍니다.
- 표시할 장소가 맞는 경우 하단의 공유를 클릭합니다.
- 공유 팝업이 나타나면 지도 퍼가기 탭을 클릭합니다.
- HTML 복사를 클릭해, 임베드 코드를 복사합니다.
2단계: 코드 위젯 추가 및 임베드 코드 입력하기
- 캠페이너스 디자인 모드에 접속합니다.
- 왼쪽 상단의 메뉴 관리 아이콘을 클릭해 지도를 삽입할 메뉴로 이동하거나 새롭게 생성합니다.
- 왼쪽 상단의 위젯 추가 아이콘을 클릭하고, 코드 위젯을 추가합니다.
- 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
- 컨텍스트 메뉴가 나타나면 코드 설정을 클릭합니다.
- 코드 입력 칸에 위 1단계에서 복사한 지도 공유 코드를 붙여넣습니다. (단축키: Ctrl + V)
- 붙여넣기한 코드에서 width(600)와 height(450) 값을 삭제하고, 다음과 같이 수정합니다.
- width: 100% 를 입력합니다. 코드 위젯 가로 크기에 맞춰 자동으로 늘어나고 줄어들게 됩니다.
- height: 숫자를 입력해 세로 크기를 늘리거나 줄일 수 있습니다.
- 저장 버튼을 클릭해 코드 설정을 완료합니다.
(선택 사항) 3단계: 지도 가로 영역 확장하기
지도를 섹션에 꽉 채워 표시할 수 있습니다.
- 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
- 가로 영역 확장을 클릭합니다.
- 지도가 섹션에 꽉 채워집니다.
4단계: 미리보기 및 게시하기
- 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
- 지도가 정상적으로 표시되는지 확인합니다.
- 디자인 모드로 돌아가 문제가 없다면 게시하기 버튼을 클릭해 적용합니다.