수인디자인 쇼핑몰스킨 중 ABOUT US > '찾아오시는길 ' 소스에 다음지도(카카오맵) 삽입하는 방법을 알려드리겠습니다.
- https://map.kakao.com/
2. 카카오맵(kakaomap)에서 찾는 건물명을 검색합니다.(주소로 검색시 8번 으로 이동하세요)
- 2. 왼쪽 아래에 연관 건물명이 검색되면 건물명을 클릭합니다.
- 3. 건물명을 선택하면 오른쪽 지도에 건물명이 표기됩니다.
- 3. 지도에 표시된 건물명칭을 클릭하면 새 창이 열립니다.
3. 새창 오른쪽 위에 인쇄표시 밑에 있는 깃발모양 아이콘을 클릭 합니다.
4. 약도 만들기 화면에서 지도에 표시할 옵션을 선택합니다.
지도크기 : PC기본화면, 모바일 기본화면, 사용자 지정 중에서 선택합니다.
- 아이콘 변경 : 네가지중 하나를 선택하면 지도에 아이콘 모양이 변경됩니다.
- 교통정보 : 홈페이지 지도 밑에 표시될 항목만 선택합니다.
- 소스 생성하기를 눌러 줍니다.
소스 생성하기 전에 주소, 전화, 메모는 원하는 글자나 숫자로 수정 가능합니다.
6. 생성된 소스를 복사합니다.
* 소스 생성하기 화면에서는 자동동으로 소스가 선택됩니다.
소스 생성하기 화면에서는 아래 두가지 옵션이 있습니다.
- 일반지도 : 지도를 확대, 축소, 이동이 가능합니다.
- 이미지지도 : 확대, 축소, 이동할 수 없습니다.
7. 복사된 소스를 쇼핑몰 html 편집에서 붙여 넣기를 합니다.
/roma/sub/sub-04.html 에서
<div id="map" style="width:100%;height:600px;" class="-sub">
</div>
<div id="map" style="width:100%;height:600px;" class="-sub">
<!--
* 카카오맵 - 약도서비스
* 한 페이지 내에 약도를 2개 이상 넣을 경우에는
* 약도의 수 만큼 소스를 새로 생성, 삽입해야 합니다.
-->
<!-- 1. 약도 노드 -->
<div id="daumRoughmapContainer1667438395293" class="root_daum_roughmap root_daum_roughmap_landing"></div>
<!-- 2. 설치 스크립트 -->
<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<!-- 3. 실행 스크립트 -->
<script charset="UTF-8">
new daum.roughmap.Lander({
"timestamp" : "1667438395293",
"key" : "2cdck",
"mapWidth" : "1920",
"mapHeight" : "600"
}).render();
</script>
</div>
위처럼 붙여넣기해 주세요.
8. 건물 검색이 안되는 경우 주소검색을 해 주세요.
- 2. 주소가 검색되면 주소를 클릭합니다.
- 3. 건물명을 선택하면 오른쪽 지도에 건물명이 표기됩니다.
- 3. 지도에 표시된 HTML태그복사클릭하면 새 창이 열립니다.
9. 약도 만들기 화면에서 지도에 표시할 옵션을 선택합니다.
지도크기를 입력해 주세요.
- 아이콘 변경 : 네가지중 하나를 선택하면 지도에 아이콘 모양이 변경됩니다.
- 주소 및 전화 ,메모 수정은 불가합니다.
10. 다시 6번, 7번으로 이동합니다.
