로그인

검색

Extra Form
추천지수 8
주소 04524 서울 중구 세종대로 110 (서울 중구 태평로1가 31) (태평로1가, 서울특별시청)
상호명 서울시청

라이믹스로 커뮤니티를 만들고 회원이 글을 쓰게 했을때 만약 위치정보가 필요해서 글 작성자에게 지도를 넣으라고 하면 굉장히 어려운 작업이 됩니다. 물론 에디터컴퍼넌트에 지도도구라는 것이 있긴 하지만 사실 일반적인 글을 쓰고 파일을 첨부하는 정도의 일만 해본 일반인은 굉장히 부담스럽고 쉽게 하지 못하는 작업이 됩니다.

 

실제로 지도도구를 사용할 있게 하고 회원들에게 지도를 넣어달라고 해서 운영을 해보면 지도가 들어가는 게시글은 굉장히 낮은 비율이고 대부분 지도를 넣지 못하게 됩니다.

 

이렇게 할 바에는 차라리 어차피 입력 받은 주소를 이용해서 자동으로 지도와 위치 마커를 표시해주는게 운영자나 사용자 모두에게 큰 이득이 될 것입니다.

 

 

카카오 api 자바스크립트키 준비

우선 카카오지도를 사용할 것이니 카카오 자바스크립트키가 있어야 합니다.

 

https://developers.kakao.com/

 

위 카카오 개발자센터에 애플리케이션등록(쉽게 말하면 사이트등록)을 하면 자바스크립트키가 만들어지니 이 자바스크립트키를 먼저 확보해 주세요.

이부분 자세한 설명은 다루지 않겠습니다.

 

 

 

 

사용자정의 생성

 

지도를 표시할 게시판에 사용자정의(확장변수)로 주소,상호명 을 만들어 줍니다.

 

주소확장변수생성.png

주소 입력에 사용될 사용자정의에는 address 라는 id를 사용했습니다.

필수항목을 예로 하셔야 주소를 꼭 입력받을 수 있습니다.

 

 

 

 

 

 

 

상호명확장변수생성.png

 

상호명에 사용될 사용자정의 id는 place_name 으로사용했습니다.

필수항목을 예로 하셔야 상호를 지도에 표시하는 기능을 구현할 수 있습니다.

 

 

사용하는 게시판 스킨의 게시글 열람을 담당하는 파일 _read.html 과 같은 파일을 열어서 스크립트를 추가해 줍니다.

 

 

 

 

스크립트 삽입

 

스크립트는 하단에 넣어주시면 됩니다.

 

 

<block cond="$oDocument->getExtraEidValue('address')[1]">
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=카카오자바스크립트키&libraries=services,clusterer,drawing"></script>
 <script>
 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };  

// 지도를 생성합니다    
var map = new kakao.maps.Map(mapContainer, mapOption); 

var mapTypeControl = new daum.maps.MapTypeControl();
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

// 주소로 좌표를 검색합니다
geocoder.addressSearch('{$oDocument->getExtraEidValue('address')[1];}', function(result, status) {

    // 정상적으로 검색이 완료됐으면 
     if (status === kakao.maps.services.Status.OK) {

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
            map: map,
            position: coords
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
            content: '<div style="width:150px;text-align:center;padding:6px 0;">{$oDocument->getExtraEidValueHTML('place_name');}</div>'
        });
        infowindow.open(map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        map.setCenter(coords);
    } 
});    
</script>
</block>

 

 

 

cond="$oDocument->getExtraEidValue('address')[1]" 의 조건을 건 이유는 주소입력이 있는 경우만 작동하도록 조건을 걸었습니다.

 

$oDocument->getExtraEidValue('address')[1] 는 주소입력이 배열로 되는데 2번째에 들어가는 주소를 가져오게 하는 것 입니다. 지도를 표시하려면 우편번호와 같은 첫번째 요소는 없어야 하며 배열의 두번째에 위치한 주소가 필요합니다.

 

*카카오자바스크립트키 라고 쓰여진 곳은 발급받은 자바스크립트키를 넣어주셔야 합니다.

 

 

 

지도출력 코드 넣기

 

그리고 지도가 출력이 되길 원하는 위치 

보통은 본문 하단에 위치하길 원할 것 같긴 합니다.

 

 

{$oDocument->getContent(false)} 

 

이런 코드가 본문을 출력하는 코드이니 위 코드 아래에 원하는 위치에 지도를 표시할 코드를 넣어주시면 됩니다.

 

<div id="map" style="width:100%;height:350px;" cond="$oDocument->getExtraEidValue('address')[1]"></div>

위 코드가 지도를 출력해 주는 코드 입니다.

 

 

*카카오내비 길안내 연동 기능의 팁이 추가로 작성되었습니다.

https://rxtip.kr/rx_tip/6510

 

기본적인 설명은 카카오api 메뉴얼에 있습니다.

https://apis.map.kakao.com/web/sample/addr2coord/

 

 

애드온으로 제작했습니다. 

https://rxtip.kr/download/6692

 

위치정보

Who's 꿀팁관리소장

profile
라이믹스로 커뮤니티 사이트를 운영하는 비개발자 운영자 입니다.
파트너쉽 맺으실 사이트 운영자분 환영합니다.
4 추천
Atachment
첨부 '0'
  • 벨로위키 2021.04.17 15:04
    또 헤메고 있습니다.


    _read_html


    맨하단에 스크립트 넣기


    <!--// 목록 보이지 않을 때 보이는 하단 메뉴 -->

    <div cond="$mi->rd_lst && $mi->default_style!='blog'" >

    <div >

    <a href="{getUrl('document_srl','')}"><i ></i> {$lang->cmd_list}</a>

    <a href="#bd_{$mi->module_srl}"><i ></i> {$lang->cmd_move_up}</a>

    </div>

    <div >

    <block cond="$mi->prev_next=='2' && !$oDocument->isNotice()">

    <a href="#">{$lang->cmd_prev}</a>

    <a href="#">{$lang->cmd_next}</a>

    </block>

    <a cond="!$mi->write_btm_btn || ($mi->write_btm_btn!='N' && $grant->write_document)" href="{getUrl('act','dispBoardWrite','document_srl','')}"><b ></b> {$lang->cmd_write}</a>

    </div>

    </div>


    <hr />

    <block cond="$oDocument->getExtraEidValue('address')[1]">

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=카카오자바스크립트키&libraries=services,clusterer,drawing"></script>

    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

    <script>

    Kakao.init('319b5b6af6072a02ae97fe73c40f077e');//카카오공유스크립트 등 에서 이미 사용했다면 지워주세요.

    var mapContainer = document.getElementById('map'), // 지도를 표시할 div

    mapOption = {

    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표

    level: 3 // 지도의 확대 레벨

    };

    // 지도를 생성합니다

    var map = new kakao.maps.Map(mapContainer, mapOption);

    var mapTypeControl = new daum.maps.MapTypeControl();

    map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);

    var zoomControl = new daum.maps.ZoomControl();

    map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

    // 주소-좌표 변환 객체를 생성합니다

    var geocoder = new kakao.maps.services.Geocoder();

    // 주소로 좌표를 검색합니다

    geocoder.addressSearch('{$oDocument->getExtraEidValue('address')[1];}', function(result, status) {

    // 정상적으로 검색이 완료됐으면

    if (status === kakao.maps.services.Status.OK) {

    var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

    // 결과값으로 받은 위치를 마커로 표시합니다

    var marker = new kakao.maps.Marker({

    map: map,

    position: coords

    });

    // 인포윈도우로 장소에 대한 설명을 표시합니다

    var infowindow = new kakao.maps.InfoWindow({

    content: '<div >{$oDocument->getExtraEidValueHTML('place_name');}</div>'

    });

    infowindow.open(map, marker);

    // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다

    map.setCenter(coords);

    }

    });

    </script>

        </block>



    그리고 본문에 출력 


            <article>{$oDocument->getContent(false)}</article>

    <p cond="$mi->bon_ha_html_YesNo!='N'">

    <br/>

    {$mi->bon_ha_html}

    </p>

    <div cond="$oDocument->getExtraEidValue('address')[1]"></div>


    <div cond="$mi->img_insert=='3'" >

    <block loop="$oDocument->getUploadedFiles()=>$key,$file">

    <block cond="!$mi->img_insert2">

    {@

    $ext=substr($file->source_filename, -4);

    $ext=strtolower($ext);

    $extImg=in_array($ext,array('.jpg','jpeg','.gif','.png'));

    }

    </block>

    <block cond="$mi->img_insert2">

    {@

    $ext=substr($file->source_filename, -15);

    $ext=strtolower($ext);

    $extImg=in_array($ext,array('_rd_gallery.jpg','rd_gallery.jpeg','_rd_gallery.gif','_rd_gallery.png'));

    }



    카카오스크립트 키는 넣었습니다. 

  • profile
    꿀팁관리소장 2021.04.17 15:10
    To.벨로위키

    그리고 본문에 출력

    <div cond="$oDocument->getExtraEidValue('address')[1]"></div>

    이부분에 왜 id 값이 빠져있나요??? id와 style 모두 넣어야 합니다. 



    그리고 지금 어느 게시판에 적용하고 계신가요?

    소스보기를 해도 스크립트가 보이지도 않네요.

  • 밸로위키 2021.04.17 15:21
    To.꿀팁관리소장
    <hr id="rd_end_{$oDocument->document_srl}" class="rd_end clear" />
    <block cond="$oDocument->getExtraEidValue('address')[place_name]">
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=319b5b6af6072a02ae97fe73c40f077e&libraries=services,clusterer,drawing"></script>
    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
    <script>
    Kakao.init('319b5b6af6072a02ae97fe73c40f077e');//카카오공유스크립트 등 에서 이미 사용했다면 지워주세요.
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
    level: 3 // 지도의 확대 레벨
    };

    // 지도를 생성합니다
    var map = new kakao.maps.Map(mapContainer, mapOption);

    var mapTypeControl = new daum.maps.MapTypeControl();
    map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
    var zoomControl = new daum.maps.ZoomControl();
    map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

    // 주소-좌표 변환 객체를 생성합니다
    var geocoder = new kakao.maps.services.Geocoder();

    // 주소로 좌표를 검색합니다
    geocoder.addressSearch('{$oDocument->getExtraEidValue('address')[place_name];}', function(result, status) {


    이런식으로 수정하는게 아닌가요? id 는 함수변수명 스타일은 뭔지 잘 모르겠어요.
  • profile
    꿀팁관리소장 2021.04.17 15:23
    To.밸로위키
    이상하게 바꾸지 마시고 제가 적어드린대로 해주세요. 그리고 어디 게시판에 적용해는지 알려주시구요.
  • 벨로위키 2021.04.17 15:25
    To.꿀팁관리소장
    https://feedzone.club/board_MJxR97

    여기입니다.

    다시 한번 찬찬히 보고 적용해 볼게요
  • profile
    꿀팁관리소장 2021.04.17 15:27
    To.벨로위키

    스크립트 이상하게 바꾼거 원래대로 다 돌리시구요.

    1.주소 사용자정의 address 로 정확히 하셨나요? 아니면 지금 주소 입력된 곳의 id로 바꿔서 스크립트 모든 부분을 다 바꿔줬나요?

    2.상호명 표시될 사용자정의는 place_name으로 생성하셨나요?


    1번이 아니오 라면 스크립트는 실행되지 않습니다.

  • 벨로위키 2021.04.17 16:10
    To.꿀팁관리소장
    상호명까지 해야 하는지 지금 보고 다시 잘 적용 된것 같은데 아직 출력이 안되네요.

    혹시 출력 부분 자리를 잘못잡은걸까요?



    <article>{$oDocument->getContent(false)}</article>

    <p cond="$mi->bon_ha_html_YesNo!='N'">
    <br/>
    {$mi->bon_ha_html}
    </p>
    <div id="map" style="width:100%;height:350px;" cond="$oDocument->getExtraEidValue('address')[1]"></div>


    <div cond="$mi->img_insert=='3'" class="xe_content rd_gallery">
    <block loop="$oDocument->getUploadedFiles()=>$key,$file">
    <block cond="!$mi->img_insert2">
    {@
    $ext=substr($file->source_filename, -4);
    $ext=strtolower($ext);
    $extImg=in_array($ext,array('.jpg','jpeg','.gif','.png'));
    }
    </block>
  • profile
    꿀팁관리소장 2021.04.17 16:13
    To.벨로위키
    주소 사용자정의 id 값을 address 로 정확히 일치시켜야 한다고 말씀 드렸는데 이부분 답이 없으시네요.
  • To.꿀팁관리소장

    스크린샷 2021-04-17 16.14.44.png

     

    이렇게 하는것 아닌가요?

  • 벨로위키 2021.04.17 16:16
    To.벨로위키
    카카오 스크립트 키는 변경한 후 맨 하단에 이렇게 넣었습니다.


    <block cond="$oDocument->getExtraEidValue('address')[1]">
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=319b5b6af6072a02ae97fe73c40f077e&libraries=services,clusterer,drawing"></script>
    <script type="text/javascript" src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
    <script>
    Kakao.init('319b5b6af6072a02ae97fe73c40f077e');//카카오공유스크립트 등 에서 이미 사용했다면 지워주세요.
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
    mapOption = {
    center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
    level: 3 // 지도의 확대 레벨
    };
  • profile
    꿀팁관리소장 2021.04.17 16:17
    To.벨로위키

    address 에서 d 하나가 빠졌습니다.

    그리고 기존 게시글 수정하셔서 상호를 넣어주셔야 상호도 지도에 표시됩니다.

  • 벨로위키 2021.04.17 16:20
    To.꿀팁관리소장
    수정하니 뭔가 나오려는지 자리가 생기긴 한것 같습니다.
    https://feedzone.club/board_MJxR97/6582
  • profile
    꿀팁관리소장 2021.04.17 16:25
    To.벨로위키

    카카오자개발자 애플리케이션 등록 자바스크립트키가 유효한가요?

    작업하실때 브라우저 콘솔 에러를 보시는 것을 추천해드립니다.

  • 벨로위키 2021.04.17 16:37
    To.꿀팁관리소장
    키를 새로 발급 받아서 적용했는데도 안되네요. 콘솔에러는 이렇게 뜹니다.

    widget.css:1 Failed to load resource: the server responded with a status of 404 ()
    sdk.js:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)
    sdk.js:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)
    6582:3440 Uncaught ReferenceError: kakao is not defined
    at 6582:3440
    4rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    37board.js?20180408162204:379 Uncaught TypeError: Cannot read property 'top' of undefined
    at board.js?20180408162204:379
    at dispatch (jquery-2.2.4.min.js?20210416110452:3)
    at r.handle (jquery-2.2.4.min.js?20210416110452:3)
    widget.css:1 Failed to load resource: the server responded with a status of 404 ()
  • profile
    꿀팁관리소장 2021.04.17 16:42
    To.벨로위키
    엉뚱한걸 넣으신간 아닐지.. 자바스크립트 키 인증 문제는 제가 해결해드릴수 있는 영역이 아니라서요.
  • 벨로위키 2021.04.17 16:45
    To.꿀팁관리소장
    자바스크립트 키 새로 받은게 인증 받는데 시간이 좀걸리나요?
    일단 지금 에러코드보니 뜬금 업는 이온디님 위젯코드 에러도 있네요.
    자바스크립트키쪽을 좀 더 둘러 보겠습니다.

    GET https://feedzone.club/widgets/rank_exp/skins/eond/css/widget.css net::ERR_ABORTED 404
    5A parser-blocking, cross site (i.e. different eTLD+1) script, <URL>, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See <URL> for more details.
    kakao.js:31 Uncaught TypeError: Cannot read property 'currentStyle' of null
    at h.bb [as constructor] (kakao.js:31)
    at h.rc [as constructor] (kakao.js:34)
    at new h (kakao.js:43)
    at 6582:3445
    bb @ kakao.js:31
    rc @ kakao.js:34
    h @ kakao.js:43
    (anonymous) @ 6582:3445
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    rhymix.min.js?20210416110545:11 DEPRECATED : xGetElementById() is deprecated in Rhymix.
    207board.js?20180408162204:379 Uncaught TypeError: Cannot read property 'top' of undefined
    at board.js?20180408162204:379
    at dispatch (jquery-2.2.4.min.js?20210416110452:3)
    at r.handle (jquery-2.2.4.min.js?20210416110452:3)
    (anonymous) @ board.js?20180408162204:379
    dispatch @ jquery-2.2.4.min.js?20210416110452:3
    r.handle @ jquery-2.2.4.min.js?20210416110452:3
  • profile
    꿀팁관리소장 2021.04.17 16:47
    To.벨로위키

    그건 위젯 css 파일이 없다는 거구요. 아마 날아갔겠죠.

    키 문제는 그런일이 있는지 모르겠구요.

    뭔가 잘못하고 계실거라는 추측만...

  • 벨로위키 2021.04.17 16:51
    To.꿀팁관리소장
    저런 에러코드들은 무시해도 괜찮을까요?
  • profile
    꿀팁관리소장 2021.04.17 16:55
    To.벨로위키
    아니요. 날라간 파일을 다시 업로드해줘야죠. 지금 css가 적용 안되니 이상하게 출력되겠죠.
  • To.꿀팁관리소장

    스크린샷 2021-04-17 17.02.31.png.jpg

    제가 쓰는 편집기가 vi code 라는건데 지금 빨간색 부분으로 된 곳이 왜 주석 처리가 안되고 코드로 인식될까요?

  • profile
    꿀팁관리소장 2021.04.17 17:09
    To.벨로위키
    주석형이 쓰이는 곳에 주석을 하면 편집기가 문제가 아니라 라이믹스에서도 에러가 날 수 있습니다. 왠만하면 주석형이 있는 부분에 주석을 하는 것은.....
  • 벨로위키 2021.04.17 17:36
    To.꿀팁관리소장
    이건 제가 주서거리 한게 아니라 스케치북 코드가 이렇게 되어 있어서요. 아무래도 주석으로 처리하거나 지워야할것 같아서 문의 드려봤습니다. 왜 주석이 안되는지 이유를 모르겠네요.
  • profile
    꿀팁관리소장 2021.04.17 17:37
    To.벨로위키

    주석이 아니고 주석형 조건문인데.. 무슨말인지 잘 모르겠네요..

    코드는 이상없으니 그냥 두셔야 합니다.

  • 벨로위키 2021.04.17 17:38
    To.꿀팁관리소장
    아 주석형 조건문도 있군요. 제가 주석으로 착각했나봅니다. 그래도 빨간색이라 불안하긴 하네요.
  • profile
    꿀팁관리소장 2021.04.17 17:40
    To.벨로위키
    불안하실 일아니고 편집기들이 cms의 템플릿 문법을 다 알지 못하기에...
  • profile
    꿀팁관리소장 2021.04.17 17:10
    To.벨로위키
    지도스크립트를 뒤쪽에 나오도록 제가 작성한 대로 되도록 해주세요. 저도 이제 시간이 없어서 도움 드리기 어렵습니다.
  • profile
    꿀팁관리소장 2021.04.17 17:04
    To.벨로위키

    자바스크립트키 문제는 해결이 된 것 같습니다.
    그런데 지도 출력하는 위치하고 스크립트 위치가 바뀌어서 지금 지도가 못나오고 에러가 납니다.

    스크립트 위치를 맨 하단으로 해달라고 작성했는데 위치를 바꾸신 이유가.....

  • 벨로위키 2021.04.17 17:31
    To.꿀팁관리소장
    현재는 맨 하단에 달았습니다. 안되다 보니 맨 하단이 스크립트의 맨 하단인가 하고 잠시 이동해서 테스트 했었습니다.
    긴 시간 너무 감사 합니다. 나머지는 제가 스스로 찾아볼게요.
  • To.벨로위키

    스크린샷 2021-04-17 17.32.27.png

    와 정말 멋집니다.

     

    감사 합니다!!

  • 벨로위키 2021.05.03 10:30

    새로 적용한 게시판 스킨에 적용 했습니다. 별문제 없는 것 같긴 한데 혹시 몰라서 문의 드려봅니다. 콘솔에러 괜찮을까요? 

    A parser-blocking, cross site (i.e. different eTLD+1) script, <URL>, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See <URL> for more details.

  • profile
    꿀팁관리소장 2021.05.03 10:33
    To.벨로위키
    큰문제는 아니고 카카오쪽에서 처리해야할 문제로 보입니다.

라이믹스 팁(112)

라이믹스 운영과 사용에 관한 팁을 공유 합니다.

  1. read more
  2. read more
  3. Read More
  4. Read More
  5. 스케치북 빵조각 '메뉴 아이콘' 적용해 보았습니다.

    Date2021.04.21 Category기능 Views204 Votes3
    Read More
  6. Read More
  7. 본문 게시글 주소 복사 버튼 여러곳에 추가해 주기 20

    Date2021.04.10 Category기능 Views304 Votes3
    Read More
  8. input 입력창 크기가 작거나 이상한가요? css box-sizing

    Date2021.04.09 Category기타 Views245 Votes4
    Read More
  9. 본문 게시글 주소 클립보드 복사 기능 만들기 23

    Date2021.04.06 Category기능 Views602 Votes3
    Read More
  10. Read More
  11. 라이믹스 2.0 회원 서명 높이를 조절 하고 싶다면

    Date2021.03.13 Category기능 Views216 Votes5
    Read More
  12. Read More
  13. Read More
  14. Read More
  15. Read More
  16. Flex 레이아웃 로그인 오류 메시지 안뜨는 문제 해결

    Date2021.01.31 Category오류 Views245 Votes3
    Read More
  17. Read More
  18. Read More
  19. Read More
  20. Read More
  21. Read More
  22. Read More
  23. Read More
  24. Read More
  25. Read More
  26. Read More
  27. Read More
  28. Read More
  29. Read More
  30. Read More
  31. Read More
  32. Read More
Prev 1 2 3 4 Next
/ 4