• 가이드

페이지에 구글 지도 삽입하기 (API 설정 불필요)

페이지에 단일 지도 위젯에서 구글 지도를 사용하려면, 앞서 구글 지도 API 설정을 마쳐야 합니다. 이 방법은 설정과정이 다소 번거롭지만, 한 번 설정을 완료하면 다양한 효과 및 기능을 편리하게 사용 가능하다는 장점이 있습니다.

만약 지도 API 설정에 어려움을 느끼거나 기본 구글 지도만으로 충분한 경우, 구글의 지도 공유하기 기능을 사용할 수 있습니다. 이 방법은 개인이 지도를 제어할 수는 없지만, 설치가 간단합니다.

참고: 지도 게시판 위젯에서 지도를 사용하려면 네이버 또는 구글 지도 API 설정을 필수로 완료해야 합니다.

삽입방법

1단계, 구글 지도 임베드 코드 복사하기
  1. 구글 지도에 접속합니다.
  2. 왼쪽 상단 검색필드에 검색할 장소명 또는 주소를 입력하고, 키보드 Enter를 눌러줍니다.

  3. 표시할 장소가 맞는 경우 하단의 공유를 클릭합니다.

  4. 공유 팝업이 나타나면 지도 퍼가기 탭을 클릭합니다.

  5. HTML 복사를 클릭해, 임베드 코드를 복사합니다.

2단계, 코드 위젯 추가 및 임베드 코드 입력하기
  1. 아임웹 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단 메뉴 관리를 클릭해 지도를 삽입할 메뉴로 이동하거나 새롭게 생성합니다. 메뉴 생성방법
  3. 왼쪽 상단 위젯 추가를 클릭하고, 코드 위젯을 추가합니다.
  4. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 보조 메뉴가 나타나면 코드 설정을 클릭합니다.
  6. 코드 입력 칸에 위 1단계에서 복사한 지도 공유 코드를 붙여넣습니다. ****(단축키: Ctrl + V)

  7. 붙여넣기한 코드에서 width(600)와 height(450) 값을 삭제하고, 다음과 같이 수정합니다.

    • width: 100% 를 입력합니다. 코드 위젯 가로 크기에 맞춰 자동으로 늘어나고 줄어들게 됩니다.
    • height: 숫자를 입력해 세로 크기를 늘리거나 줄일 수 있습니다.
  8. 저장 버튼을 클릭해 코드 설정을 완료합니다.
(선택 사항) 3단계, 지도 가로 영역 확장하기

지도를 섹션에 꽉 채워 표시할 수 있습니다.

  1. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  2. 가로 영역 확장을 클릭합니다.
  3. 지도가 섹션에 꽉 채워집니다.
4단계, 미리보기 및 게시하기
  1. 디자인 모드 오른쪽 상단 미리보기를 클릭합니다.
  2. 지도가 정상적으로 표시되는지 확인합니다.
  3. 문제가 없다면 게시하기 버튼을 클릭해 적용합니다.

지도 API 설정하기

지도 게시판을 사용하거나 단일 지도의 모양을 변경하고 싶은 경우 지도 API 설정이 필요합니다. 아래 도움말을 참조해 지도 API 설정방법을 알아볼 수 있습니다.

목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

115.6K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

297

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

1.8K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 채널, 엑심베이 공식파트너입니다.