장바구니

등록된 상품이 없습니다
합계: 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_google_m2/


    주요기능

     - 구글 지도를 연동하여 장소(마커)를 표시하는 기능

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

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

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

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

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

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

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


    주의사항 

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

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

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

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

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

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

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

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




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


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




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


     

    [ 구글지도 스킨 목록 화면 ]




    [ 숏코드 설정 ]  


    [mb_board name="s_map_google" 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://console.cloud.google.com/home) 접속  

    2. 개발자 등록 및 새프로젝트 생성

       - 매월 $200.00의 무료 사용량이 제공되며 초과시 요금이 부가됨 

       - 결제계정을 연결해야만 사용 가능

    3. Maps API 및 서비스 설정 주소  (https://console.cloud.google.com/google/maps-apis/api-list?hl=ko) 접속 

       - Maps JavaScript API 항목 클릭 > "사용설정" 버튼 클릭

       - Geolocation API 항목 클릭 > "사용설정" 버튼 클릭 

    4. 왼쪽 상단에 탐색메뉴( mb-file.php?path=2020%2F03%2F16%2FF12035_menu_image.PNG 버튼 클릭 > API 및 서비스 > 사용자 인증 정보 

    5. 사용자 인증 정보 페이지 상단에 있는 "+사용자 인증정보 만들기"  > API 키 항목 클릭

    6. API 키가 표시된 팝업창이 나오면 하단에 "키제한" 버튼 클릭

    7. 애플리케이션 제한사항 > HTTP 리퍼러(웹사이트) 선택 > 리퍼러 주소에 지도를 사용할 웹사이트 주소 입력 후 완료 버튼 클릭 (예: *.mangboard.com/* )

    8. 페이지 하단에 저장 버튼 클릭 후 생성한 API 키를 숏코드 map_key 속성에 입력


    ※ 구글 Maps 가이드: https://developers.google.com/maps/documentation/





    [ 지도 아이콘 ]   


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

    원하시는 마커 아이콘을 수정하신 후 hometory_map_google_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_google_m2


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


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

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



     

    [ 라이센스 / 환불 ] 


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

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

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

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

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

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

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

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

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

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



     

    [ 상품 Q&A ] 


    문의유형문의/답변작성자날짜
    등록된 상품 문의가 없습니다