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

아임웹 디자인 모드에서 지도 위젯을 사용하면 구글 지도 또는 네이버 지도를 통해 위치 정보를 공유하면서 다양한 지도 효과와 디자인을 적용할 수 있게 됩니다. 그러나, 지도 위젯을 사용하기 위해선 내 사이트에 구글 지도 플랫폼 또는 네이버 클라우드 플랫폼을 통해 지도 API 설정을 완료해야 합니다.

만약 API 설정을 하지 않고, 위치 정보만 간단히 페이지에 표시하는 경우, 구글 지도 공유 기능을 활용해 빠르게 지도를 추가해 볼 수 있습니다. 이 방법은 개인 사용자가 지도를 제어함에 있어 제한이 있지만 매우 간편합니다.

삽입방법

  1. 구글 지도에 접속합니다.
  2. 왼쪽 상단의 검색필드에 장소명 또는 주소를 입력하고, 키보드 Enter 키를 눌러 장소를 검색합니다.

  3. 검색 결과에 원하는 장소가 나오면 공유 아이콘을 클릭합니다.

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

  5. HTML 복사 를 클릭해 퍼가기 태그를 복사합니다.

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

  7. 붙여넣은 HTML에서 widthheight 속성 값을 수정하여 지도의 크기를 변경할 수 있습니다. 아래의 그림과 설명을 참고해 widthheight 속성의 따옴표 안쪽 값을 수정해 주세요.

    • width: 지도의 가로 길이는 100% 를 입력합니다.
    • height: 지도의 세로 길이를 숫자 형식으로 입력합니다. (세로 길이는 % 단위를 사용할 수 없습니다. 입력한 숫자는 픽셀 단위로 처리됩니다.)
  8. 저장 버튼을 클릭해 코드 설정을 완료합니다.

지도를 브라우저 가로 길이에 맞춰 가로로 100% 채워 표시할 수 있습니다.

  1. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  2. 컨텍스트 메뉴가 나오면 가로 영역 확장 을 클릭합니다.

  3. 지도가 가로로 100% 채워져 표시됩니다.
  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 지도가 정상적으로 표시되는지 확인합니다.
  3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

구글 또는 네이버 지도 API 설정하기

지도 게시판 위젯을 사용하거나 단일 지도의 스타일을 변경하고 싶은 경우, 지도 API 설정이 필요합니다. 아래 도움말에 따라 네이버 또는 구글 지도의 API를 설정하는 방법을 알아보세요.

목록으로