장바구니

등록된 상품이 없습니다
합계: 0

최근 본 상품

등록된 상품이 없습니다
워드프레스 전문가들이 선택한 필수 플러그인
    Store
    Home / Store
    네이버지도 스킨 M2
    네이버지도를 통해 장소(마커)를 표시하는 지도 스킨
    마커 라벨 표시 기능 및 그룹으로 묶어서 보여주는 클러스터 기능 제공
    글보기
    판매가격89,100  99,000 10%
    혜택1,000 포인트 적립
    개발사Hometory
    글보기
    선택옵션
    홈페이지 URL
    라이센스를 등록할 URL주소를 입력해 주세요
    개발용 URL
    홈페이지 주소와 개발 주소가 다를 경우에만 입력해 주세요
    글보기
    글보기


    [ 네이버지도 스킨 M2 ]


    설치환경 : 망보드 Basic 1.4.3, PHP 5.4.0, MySQL 5.x(MariaDB 10.0.x) 이상 필요

     

    라이센스 : 1copy-1domain-1host : 1개 도메인-1개 호스트(www)에서만 사용이 가능합니다


    샘플주소 https://demo.mangboard.com/s_map_naver_m2/


    주요기능

     - 네이버 지도를 연동하여 장소(마커)를 표시하는 기능

     - 마커와 연동되는 웹진 리스트 기능

     - 지도 줌 확대시 마커에 대한 라벨 표시 기능

     - 지도 줌 축소시 그룹으로 묶어서 보여주는 클러스터 기능

     - 지도가 줌 축소/확대 및 좌표가 이동 되면 해당 영역에 속한 마커를 다시 불러옴

     - 지도에서 마커 클릭시 웹진 목록에서 마커에 해당하는 정보 노출

     - 웹진 목록에서 이미지 클릭시 해당 마커 위치 표시 기능  

     - 웹진 텍스트 클릭시 마커 상세보기 페이지로 이동


    주의사항 

     - 소규모 지도 서비스를 위한 지도스킨으로 지도에서 한번에 불러올 수 있는 마커는 최대 2,000개 까지만 가능 

       화면에 보이는 지도 영역에 3,000개의 마커 데이타가 검색되도 지도에는 최대 2,000개의 마커만 표시됨 

     - 한번의 불러올 수 있는 마커의 최대 개수는 호스팅 사양에 따라 변동 가능

     - 저사양 호스팅 이용시 200개 이상의 마커를 한번에 불러오기 위해서는 "wp-config.php" 파일에 "define('WP_MEMORY_LIMIT', '512M');" 코드 추가 필요

     - 현재 위치를 찾아주는 "내위치" 버튼은 보안인증서(https)가 설치된 주소에서만 표시됨

     - 워드프레스 관리자 > 게시판 관리 페이지에서는 지도 기능 표시 안됨

     - 지도에 한번에 표시되는 마커가 많아질수록 느려지는 문제가 발생할 수 있으며, 이러한 문제를 최소화하기 위해 클러스터 기능 및 현재 화면에 보이는 마커만 표시되는 기능 적용 

     - 웹에이전시에서 직접 개발한 솔루션 형태로 변형해서 납품 불가 (무제한 라이센스 이용자만 조건부 허용) 




    네이버지도를 통해 장소(마커)를 표시하는 기능을 제공하는 지도 스킨으로  


    줌 확대시 마커에 대한 라벨 표시 기능과 줌 축소시 마커를 그룹으로 보여주는 클러스터 기능을 제공합니다.




    mb-file.php?path=2020%2F05%2F11%2FF12435__01.png
     


    [ 네이버지도 스킨 목록 화면 ]




    [ 숏코드 설정 ]   


    [mb_board name="s_map_naver" list_layout="full" list_webzine_width="390" marker_label="place" cluster_zoom="11" label_zoom="15" list_zoom="12" view_zoom="15" write_zoom="14" max_marker_label_length="30" image_hover_focus="false" focus_zoom="15" list_map_lat="37.557082611362674" list_map_lng="126.9733781569978" write_map_lat="37.557082611362674" write_map_lng="126.9733781569978" map_key="지도 API 키 입력" style=""] 


      – name : 게시판 이름 (지도 게시판으로 사용하기 위해 생성한 게시판 이름으로 수정)
      – list_layout : 지도 레이아웃 설정 (full: 전체화면 모드, boxed: 페이지에서 설정된 크기, 모바일에서는 boxed 레이아웃만 사용 가능)  
        전체화면 모드 : 윈도우 창 기준 가로 전체 넓이, 세로 높이는 지도 숏코드가 있는 위치부터 윈도우창 하단까지
      – list_webzine_width : 웹진 목록 넓이 (숫자만 입력)
      – list_map_height : 지도 높이 설정(숫자만 입력, 생략시 자동으로 높이 설정, 최소 높이 200)
        tablet_list_map_height : [태블릿] 지도 높이 설정 (생략가능)
        mobile_list_map_height : [모바일] 지도 높이 설정 (생략가능)
      – marker_label : 웹진 마커 라벨 항목 설정 (place: 장소명, title: 제목)   
      – cluster_zoom : 클러스터 기능이 시작되는 줌 설정 (숫자만 입력, 마커를 그룹으로 묶어서 보여주는 기능)
      – label_zoom : 지도에서 마커 하단에 라벨 표시가 되는 줌 설정
      – list_zoom : 목록 화면 줌 설정 (숫자만 입력, 숫자가 클수록 지도가 확대됨)
        tablet_list_zoom : [태블릿] 목록 화면 줌 설정 (생략가능)
        mobile_list_zoom : [모바일] 목록 화면 줌 설정 (생략가능)
      – view_zoom : 글보기 화면 줌 설정 (숫자만 입력숫자가 클수록 지도가 확대됨)
        tablet_view_zoom : [태블릿] 글보기 화면 줌 설정 (생략가능)
        mobile_view_zoom : [모바일] 글보기 화면 줌 설정 (생략가능)
      – write_zoom : 글쓰기 화면 줌 설정 (숫자만 입력숫자가 클수록 지도가 확대됨)
        tablet_write_zoom : [태블릿] 글쓰기 화면 줌 설정 (생략가능)
        mobile_write_zoom : [모바일] 글쓰기 화면 줌 설정 (생략가능)
      – max_marker_label_length : 마커 라벨 텍스트 최대 길이 설정 (숫자만 입력)   
      – image_hover_focus : 웹진 이미지 마우스 오버시 줌 확대 기능 사용여부 (true: 이미지 마우스 오버시 줌 확대 기능 사용, false: 이미지 클릭시에만 줌 확대 기능 사용)
      – focus_zoom : 웹진 이미지 마우스 오버 또는 클릭시 확대하는 줌 설정 (숫자만 입력)    
      – list_map_lat : 목록 화면 지도 좌표 - 위도 (글쓰기 화면 지도에서 좌표 확인 가능)
        tablet_list_map_lat : [태블릿] 목록 화면 지도 좌표 - 위도 (생략가능)
        mobile_list_map_lat : [모바일] 목록 화면 지도 좌표 - 위도 (생략가능)
      – list_map_lng : 목록 화면 지도 좌표 - 경도 (글쓰기 화면 지도에서 좌표 확인 가능)
        tablet_list_map_lng : [태블릿] 목록 화면 지도 좌표 - 경도 (생략가능)
        mobile_list_map_lng : [모바일] 목록 화면 지도 좌표 - 경도 (생략가능)
      – write_map_lat : 글쓰기 화면 지도 좌표 - 위도 (글쓰기 화면 지도에서 좌표 확인 가능)
        tablet_write_map_lat : [태블릿] 글쓰기 화면 지도 좌표 - 위도 (생략가능)
        mobile_write_map_lat : [모바일] 글쓰기 화면 지도 좌표 - 위도 (생략가능)
      – write_map_lng : 글쓰기 화면 지도 좌표 - 경도 (글쓰기 화면 지도에서 좌표 확인 가능)
        tablet_write_map_lng : [태블릿] 글쓰기 화면 지도 좌표 - 경도 (생략가능)
        mobile_write_map_lng : [모바일] 글쓰기 화면 지도 좌표 - 경도 (생략가능)
      – use_marker_thumbnail : 마커 윈도우 창에 "썸네일 이미지" 표시여부 설정 (true:표시, false:표시안함)
      – use_marker_address : 마커 윈도우 창에 "주소" 표시여부 설정 (true:표시, false:표시안함)
      – use_marker_view_link : 마커 윈도우 창에 "상세 페이지" 이동 버튼 표시여부 설정 (true:표시, false:표시안함)
      – map_key 지도 키 입력 (아래의 내용 참조)
      – style : CSS 스타일 속성 입력

    ※ 스마트 포커스 기능
    - 웹진 이미지를 클릭해서 포커스 줌 기능 사용시 줌이 한번에 3단계 이상 확대된 상태에서는
      지도에서 마우스 드래그를 해도 해당 영역에 대한 마커를 새로 불러오지 않고 기존에 로딩된 마커 데이타를 사용해서 표시
    - 줌이 변경되면 스마트 포커스 기능이 해제되어 마우스 드래그 이벤트 발생시 해당영역에 대한 마커를 새로 불러옴




    [ 지도 카테고리 설정 ]   
     

    1. 워드프레스 관리자 > MangBoard > 게시판 관리 메뉴 클릭



    2. 지도스킨이 적용된 게시판 우측의 "설정" 버튼 클릭 (지도 게시판이 아직 생성되어 있지 않을 경우 우측 하단에 "게시판 추가" 버튼 클릭)

    map_setup_button.jpg


    3. 카테고리 기능을 "탭메뉴 (탭메뉴 클릭시 AJAX 방식으로 데이타 불러옴)"으로 설정

    4. 카테고리 데이타 항목에 카테고리 데이타를 쉼표로 구분해서 입력 후 우측 하단에 확인 버튼 클릭해서 저장

    map_category.jpg





    [ 지도 API 키 ]
     

    1. 네이버 클라우드 플랫폼 회원가입 및 결제정보 입력: https://www.ncloud.com/ 

    2. 네이버 지도 서비스 주소 접속: https://www.ncloud.com/product/applicationService/maps   > "이용 신청하기" 버튼 클릭

    naver_map1.png

     

    3. + Application 등록 버튼 > 이름입력 > Service 선택 항목에서 Maps 선택 >  Web 서비스 URL 입력 (네이버 지도를 사용할 홈페이지 URL)  >  등록버튼 클릭

    (자체 개발한 모바일앱이 없을 경우 Map Service 선택 항목에서 Mobile Dynamic Map 항목만 해제)

    naver_map2.jpg

     

    4.  생성된 앱이름 하단에 "인증정보" 버튼 클릭  >  Client ID 복사  >  지도 숏코드에서 map_key 속성에 복사한 Client ID 입력

    naver_map3.png

     


    ※ 네이버 Maps API 가이드: https://navermaps.github.io/maps.js.ncp/





    [ 네이버 지도 서비스 이용한도 ]


    naver_map2.jpg

     




    [ 지도 아이콘 ]   


    hometory_map_naver_m2/psd 폴더에 아래와 같이 6개의 마커 아이콘이 들어있습니다. 

    원하시는 마커 아이콘을 수정하신 후 hometory_map_naver_m2/images/icon_map_marker1.png 파일에 

    덮어쓰기로 업로드 해주시면 됩니다.

    mb-file.php?path=2017%2F08%2F10%2FF1327_icon_map_marker.png



     

    [ 설치방법 ] 


    1. 스토어 연결 기능을 통해 필요한 파일이 자동으로 설치되는 상품입니다.

       - 설치방법: https://www.mangboard.com/tip/?vid=42

       - 설치경로: /wp-content/plugins/mangboard/skins/hometory_map_naver_m2


    2. 워드프레스 관리자 > MangBoard > 게시판 관리 > 설정(스킨을 적용할 게시판 선택) > 스킨이름에서 새로 추가한 스킨(hometory_map_naver_m2)을 선택한 후 저장합니다.


    3. 상품 내용을 참조하여 숏코드를 워드프레스 페이지에 입력하여 게시판을 연결합니다.

       (지도 키를 직접 발급받은 지도 키로 입력하지 않을 경우 지도가 정상적으로 나타나지 않습니다)



     

    [ 라이센스 / 환불 ] 


    1. 라이센스 : 1copy-1domain-1host : 1개 도메인-1개 호스트(www)에서만 사용 가능 (기간제한 없이 평생 사용 가능)

    2. 환불정책 : 파일 상품은 구입후 1주일 이내 이유에 상관없이 100% 환불을 보장합니다.

                        도메인 변경은 구입후 90일 이내에만 변경이 가능하며, 횟수에 상관없이 직접 변경이 가능합니다.

                        인건비에 해당하는 선택옵션(기술지원,디자인수정 등)은 지원을 받았을 경우 환불이 불가합니다.

    3. 보증정책 : 무보증 (유료 관리 서비스 사용자에 한해서만 보증)

                        호환성 문제 및 사용도중 발생하는 문제에 대해서는 무료 기술지원을 해드리지 않습니다.

    4. 주의사항 : 기술지원이 포함되어 있지 않은 무보증 상품으로 추가적인 사용 및 수정방법에 대한 안내를 해드리지 않습니다.

                        추가적인 도움이 필요하신 분들은 기술지원 옵션을 선택해 주세요.

    5. 기술지원 : 설치대행/디자인수정/기능수정을 신청하시는 분들은 구매후 아래 주소에서 기술지원을 신청해 주세요.

                        기술지원 신청: https://www.mangboard.com/tech_support/



     

    [ 상품 Q&A ]