홈페이지&랜딩페이지 카카오맵 초간편 넣기

「 홈페이지&랜딩페이지 카카오맵 초간편 넣기 」

 

안녕하세요.
오늘은 홈페이지&랜딩페이지에 지도를 추가해야 하는경우 네이버,구글등의 지도를 가져올 수 있지만

가장 간편히 가져올 수 있는 "카카오맵" 지도를 가져오는 방법을 포스팅 해보겠습니다.

 

 

■ 홈페이지 카카오맵 등록하는 방법

1. 카카오맵 들어가는 2가지 방법(편하신걸로 선택해서 들어가시면 됩니다.)

첫째 : https://map.kakao.com/  주소창에 입력하기

카카오맵

둘째 :  다음(https:www.daum.net/) 지도 - 카카오맵

 

2. 홈페이지 등록하려는  주소를 입력 후 태그 복사 찾기

① 홈페이지 지도에 보여질 주소를 입력
② 아이콘 클릭 -> ③ HTML 태그 복사 클릭


3. HTML 태그 복사 화면

① 홈페이지에 보여질 지도크기를 설정가능
② 홈페이지에 보여질 위치 아이콘 설정가능
③ 지도크기/아이콘변경/지도위치 확인 후 소스 생성하기


4. 소스 생성하기

① 일반지도 : 홈페이지에 보여질 지도 확대,축소 및 이동할 수 있는 형태
① 이미지지도 : 홈페이지에 보여질 지도 이미지로 되어 있어 확대,축소를 할 수 없는 형태
② 소스복사 : HTML소스를 복사하여 홈페이지에 붙여넣기하면 됩니다.
② 소스복사 방법 :

1) ②위치 마우스 오른쪽 클릭 -> Ctrl + A(범위 지정)
2) Ctrl + C(범위 복사)
3) Ctrl + V(범위 붙여넣기) - 홈페이지 소스상에 원하는 위치에 붙여넣기

5. 홈페이지 소스코드 붙여넣기

① 홈페이지에 보여질 사이즈 변경
1) mapWidth : 가로사이즈(기본단위 - 픽셀)
2) mapHeight : 세로사이즈(기본단위 - 픽셀)
[참고사항] 반응형인경우 div소스에 style='width:100%' 추가 mapWidth : 숫자삭제

6. 홈페이지 소스에 추가한 지도

 

■ 디비카트 랜딩페이지 카카오맵 등록하는 방법

 

1. https://dbcart.net 접속

쉽고 빠른 디비수집 - 디비카트

2. 회원&비회원 진행방법

※ 회원인경우 : 상단 우측 디비내역 클릭
※ 비회원인경우 : 상단 우측 회원가입 후 디비내역 클릭 - [EVENT] 7일 무료사용가능



3. 카카오맵 설정 두가지

준비 : 카카오맵 소스 생성하기한 내용을 메모장에 붙여넣기 아래부분처럼 붙여넣기 하시면 됩니다.

첫째) 디비내역 > 랜딩꾸미기 > 상세설정 > 하단꾸미기(카피라이트 문구) 추가

추기내용 : <div.....></div> (카카오맵 div 소스부분 추가)


둘째) 디비내역 > 랜딩기본정보 > 랜딩페이지 스크립트 추가

추기내용 : <script....></script> (카카오맵 script 소스부분 추가)
추기내용 : <script....>..........</script> (카카오맵 script 소스부분 추가)



4. 디비카트 랜딩페이지 카카오맵 등록완료

 

이상으로 카카오맵 홈페이지 및 랜딩페이지에 추가하는 방법을 포스팅하였습니다.
앞으로도 유익한 포스팅으로 다시 돌아오겠습니다.
마지막까지 읽어주신 모든분들에게 감사의 인사를 드립니다.
감사합니다.

 

 

 

초보자를 위한 랜딩빌더 제작 도구 BIG 3

 

구글 애드워즈 랜딩페이지 광고하기

 

쉽고 빠른 무료 랜딩페이지 제작 - 디비카트