전체상품목록 바로가기

본문 바로가기

PRODUCT SEARCH

Search:
 
뒤로가기
현재 위치
  1. 게시판
  2. 운영매뉴얼

운영매뉴얼

홈페이지/쇼핑몰에 다음지도(카카오맵) 삽입하는 방법-자동소스생성

수인디자인 (ip:)
삭제하려면 비밀번호를 입력하세요.

수인디자인 쇼핑몰스킨 중 ABOUT US > '찾아오시는길 '  소스에 다음지도(카카오맵) 삽입하는 방법을 알려드리겠습니다.


1. 다음 검색엔진 (https://map.kakao.com/ )에서 "지도"를 클릭합니다.

- 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번으로 이동합니다.


댓글 수정
취소 수정