페이지에 카카오맵 지도 삽입하기 (API 설정 불필요)
아임웹 지도 위젯으로 위치를 표시하려면 구글이나 네이버 지도 등의 다양한 지도 효과와 디자인 설정을 위해서는 지도 API 연결이 이뤄져야만 사용이 가능해요,
하지만 이 때, 코드 위젯을 활용하면 이런 과정 없이도 카카오맵을 바로 추가할 수 있습니다.
화려한 디자인은 적용하기 어렵지만, 무엇보다 쉽고 빠르다는 큰 장점이 있죠. 복잡한 설정 없이 바로 지도를 추가하고 싶으신 분들께 추천드려요.
진행 방법
1. 카카오맵(카카오지도)에 접속합니다.
2. 왼쪽 상단의 검색필드에 장소명 또는 주소를 입력하고, 키보드 Enter 키를 눌러 장소를 검색합니다.
3. 검색 결과에 원하는 장소가 나오면
2. 왼쪽 상단의 검색필드에 장소명 또는 주소를 입력하고, 키보드 Enter 키를 눌러 장소를 검색합니다.
3. 검색 결과에 원하는 장소가 나오면
공유하기 아이콘을 클릭하세요.
4. 그 후 HTML 태그 복사 를 클릭해서 퍼가기 태그를 복사합니다.
5. 마지막으로 소스 생성하기 클릭해 퍼가기 태그를 복사합니다.
TIP: 이 때, 지도 크기 및 지도에 표기되는 아이콘을 수정할 수 있어요!
- 아임웹 디자인 모드에 접속합니다. 접속방법
- 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭해 지도를 삽입할 메뉴로 이동하거나 새롭게 생성합니다. 메뉴 추가하기
- 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭 후 코드 위젯을 클릭해 추가합니다.
- 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
- 컨텍스트 메뉴가 나오면 코드 설정 을 클릭합니다.
코드 입력 칸에 위 1단계에서 복사한 HTML 태그를 붙여넣습니다. (※ 예시 이미지 참고)
TIP: 붙여넣은 HTML에서 width 와 height 속성 값을 수정하여 지도의 크기를 변경할 수 있습니다
- 저장 버튼을 클릭해 코드 설정을 완료합니다.
지도를 브라우저 가로 길이에 맞춰 가로로 100% 채워 표시할 수 있습니다.
- 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 가로 영역 확장 을 클릭합니다.
- 지도가 가로로 100% 채워져 표시됩니다.