사이트에 다음(카카오맵), 네이버 지도 삽입하는 방법(WIX)

홈페이지에 지도  삽입하는 방법 다음, 카카오맵 with WIX

WIX사이트 뿐만 아니라 HTML수정이 가능한 모든 웹에 카카오 지도를 넣는 방법입니다.

WIX 웹사이트에 한국지도를 삽입하여 사이트를 보완하고자 하시나요?
단계별로 해당 지도를 웹사이트에 삽입하는 방법을 안내해 드릴 겁니다.

한국 사이트 지도의 중요성

WIX에서는 기본적으로 구글 지도를 추가하는 기능이 있습니다.
하지만 지도는 웹사이트에서 중요한 부분이며, 특히 지역 고객을 유치하고 서비스하고자 하는 비즈니스에게는 필수적입니다.
한국 네이버, 카카오(다음) 지도는 비즈니스나 한국 내 다른 장소의 위치를 표시하는 데에 뛰어난 방법으로,
사용자 친화적이며 시각적으로 매력적이고 쉽게 이용할 수 있어 웹사이트에 이상적인 선택입니다.

안타깝게도 네이버에서는 더 이상 지도API를 제공하지 않고 있습니다.
대신 카카오맵(다음 지도)를 넣는 방법을 알려드릴게요!

WIX 사이트에 다음 지도를 삽입하는 단계별 가이드

WIX 사이트에 카카오(다음) 지도를 삽입하는 방법은 다음과 같습니다.
이해를 돕기위해 이미지를 많이 넣었지만 내용은 간단하니 한 번 보고 따라하실 수 있습니다.

WIX 사이트에 카카오(다음) 지도를 삽입하는 방법 1단계: 카카오맵 접속 후, 주소 검색  2단계: 주소 위치 핀 선택  > 공유 버튼 > HTML 태그 복사 3단계: 소스 생성하기 ( 지도크기 설정, 핀 아이콘 변경 가능 ) 4단계: WIX 에디터 > 요소추가 > 코드 삽입 > HTML 삽입 5단계: 지도 사용자 지정 (수정할 경우 '코드 변경'  선택하여 변경 가능) 6단계: 지도 미리보기 및 게시

 

 

1단계: 카카오맵 접속 후, 주소 검색 -  카카오맵 Kakao Map 바로가기 

2단계: 주소 위치 핀 선택  > 공유 버튼 > HTML 태그 복사

카카오맵 지도 공유

3단계: 소스 생성하기 ( 지도크기 설정, 핀 아이콘 변경 가능 ) 

크기와 아이콘을 설정하였으면 아래 '소스 생성하기' 버튼을 클릭하여 일반지도 소스 코드를 복사합니다.

크기와 아이콘을 설정

최소 200x200px / 지도 핀 종류 선택 가능

일반지도 소스 코드를 복사

4단계: WIX 에디터 > 요소추가 > 코드 삽입 > HTML 삽입 

1. WIX 계정에 로그인하고 WIX 에디터를 엽니다. 
2. 지도를 삽입할 페이지를 선택합니다. 
3. 왼쪽 패널에서 "추가" 버튼을 클릭합니다. 
4. 메뉴에서 "HTML 코드"를 선택하십시오.
5. HTML 코드 위젯을 페이지의 원하는 위치로 끌어다 놓습니다.
6. HTML 코드 위젯을 클릭하고 "코드 편집"을 선택합니다. 
7. 코드를 붙여넣고 업데이트 클릭하면, 지도가 화면에 나타납니다.

5단계: 지도 사용자 지정 (수정할 경우 '코드 변경'  선택하여 변경 가능)

위치를 변경하고 모서리의 크기 조절을 이용하여 원하는 크기로 만들어 줍니다.
2단계에서 카카오맵으로 설정한 사이즈가 최대 사이즈입니다. 크기조절 버튼은 홈페이지 내에서 보여줄 크기를 설정하는 것 입니다.
참고로 모바일 버전에서 자동으로 리사이징 되지 않으므로 모바일 버전은 똑같은 과정을 거쳐 크기를 변경해 다시 만들어 주어야 합니다.

화면에서 보여지는 지도 사이즈 조절

6단계: 지도 미리보기 및 게시

원하는 대로 지도를 사용자 정의한 후에는 미리 보고 웹 사이트에 게시할 수 있습니다. 방법은 다음과 같습니다. 

1. WIX 편집기에서 "미리보기" 버튼을 클릭하여 웹사이트에서 지도가 어떻게 보이는지 확인하세요.
2. 결과가 만족스러우면 "게시" 버튼을 클릭하여 웹사이트에 지도를 게시하십시오.

WIX 홈페이지에 다음 카카오 지도 넣기