장바구니

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

최근 본 상품

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


    [ 구글지도 스킨 M2 ]


    설치환경 : 망보드 Basic 1.4.3, PHP 5.4.0, My-sql 5.x 이상 필요

     

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


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


    주요기능

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

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

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

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

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

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

     - 지도에서 마커 두번 클릭시 마커 상세보기 페이지로 이동

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

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


    주의사항 

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

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

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

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

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

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




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


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




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


     

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




    [ 숏코드 설정 ]  


    [mb_board name="s_map_google" list_webzine_width="390" list_layout="full" 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_webzine_width : 웹진 목록 넓이 (숫자만 입력)   
      – list_layout : 지도 레이아웃 설정 (full: 전체화면 모드, boxed: 페이지에서 설정된 크기)  
        전체화면 모드 : 윈도우 창 기준 가로 전체 넓이, 세로 높이는 지도 숏코드가 있는 위치부터 윈도우창 하단까지
      – marker_label : 웹진 마커 라벨 항목 설정 (place: 장소명, title: 제목)   
      – cluster_zoom : 클러스터 기능이 시작되는 줌 설정 (숫자만 입력, 마커를 그룹으로 묶어서 보여주는 기능)
      – label_zoom : 지도에서 마커 하단에 라벨 표시가 되는 줌 설정 (숫자만 입력숫자가 작을수록지도가 확대됨)
      – list_zoom : 목록 화면 줌 설정 (숫자만 입력, 숫자가 클수록 지도가 확대됨)
      – view_zoom : 글보기 화면 줌 설정 (숫자만 입력숫자가 클수록 지도가 확대됨)
      – write_zoom : 글쓰기 화면 줌 설정 (숫자만 입력숫자가 클수록 지도가 확대됨)
      – max_marker_label_length : 마커 라벨 텍스트 최대 길이 설정 (숫자만 입력)   
      – image_hover_focus : 웹진 이미지 마우스 오버시 줌 확대 기능 사용여부 (true: 이미지 마우스 오버시 줌 확대 기능 사용, false: 이미지 클릭시에만 줌 확대 기능 사용)
      – focus_zoom : 웹진 이미지 마우스 오버 또는 클릭시 확대하는 줌 설정 (숫자만 입력)   
      – list_map_lat : 목록 화면 지도 좌표 - 위도 (글쓰기 화면 지도에서 좌표 확인 가능)
      – list_map_lng : 목록 화면 지도 좌표 - 경도 (글쓰기 화면 지도에서 좌표 확인 가능)
      – write_map_lat : 글쓰기 화면 지도 좌표 - 위도 (글쓰기 화면 지도에서 좌표 확인 가능)
      – write_map_lng : 글쓰기 화면 지도 좌표 - 경도 (글쓰기 화면 지도에서 좌표 확인 가능)
      – map_key : 지도 키 입력 (아래의 내용 참조)
      – style : CSS 스타일 속성 입력

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




    [ 지도 API 키 ]   
     

    1. 구글 클라우드 콘솔 사이트 (https://console.cloud.google.com/home) 접속  

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

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

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

    3. Maps API 및 서비스 설정 주소  (https://console.cloud.google.com/google/maps-apis/overview?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/



    최근 본 상품

    등록된 상품이 없습니다

    장바구니

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