게시판에 카카오 맵 넣기 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

게시판에 카카오 맵 넣기 정보

게시판 게시판에 카카오 맵 넣기

첨부파일

kakao_map.zip (68.0K) 21회 다운로드 2022-11-26 04:08:49 포인트 차감10
테스트한 버전5.4.22
호환 가능 버전5.3이상 가능할 것 같습니다

본문

게시판에 카카오맵을 넣어보았습니다.

압축을 풀면 kakao_map_pc, kakao_map_mobile 두개의 폴더가 나옵니다.

그누보드 순정기준으로 

kakao_map_pc은 skin/board/kakao_map_pc 경로로 업로드합니다.

kakao_map_mobile은 mobile/skin/board/kakao_map_mobile 경로로 업로드합니다.

 

카카오맵에서 HTML 태그 복사 -> 소스생성하기 -> 소스를 복사합니다.

아래소스는 SIR 카카오맵 주소입니다.

<!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer1669401992147" class="root_daum_roughmap root_daum_roughmap_landing"></div>

<!--
    2. 설치 스크립트
    * 지도 퍼가기 서비스를 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" : "1669401992147",
        "key" : "2cqyv",
        "mapWidth" : "640",
        "mapHeight" : "360"
    }).render();
</script>

위의 소스에서 빨간색 숫자부분을 여분 필드 wr_1을 사용해서 받아옵니다.

보라색 키값을 여분필드 wr_2를 사용해서 받아옵니다.

지도의 크기는 mapWidth, mapHeight 값으로 정하시면 됩니다.

 

write.skin.php(pc) 
<!-- kakao map start -->
      <div class="bo_w_info write_div">
        <label for="wr_1" class="sound_only">카카오맵타임스탬프<strong>필수</strong></label>
          <input type="text" name="wr_1" value="<?php echo $write['wr_1'] ?>" id="wr_1" required class="frm_input half_input required" placeholder="카카오맵타임스탬프:예--1669399050974">
 
        <label for="wr_2" class="sound_only">카카오키값<strong>필수</strong></label>
          <input style="margin-left: 8px" type="text" name="wr_2" value="<?php echo $write['wr_2'] ?>" id="wr_2" required class="frm_input half_input required" placeholder="카카오맵키값:예--2cqyu">
      </div>     
<!-- kakao map end   -->

 

write.skin.php(mobile)

<!-- kakao map start -->
      <div class="bo_w_tit write_div">
        <label for="wr_1" class="sound_only">카카오맵타임스탬프<strong>필수</strong></label>
          <input type="text" name="wr_1" value="<?php echo $write['wr_1'] ?>" id="wr_1" required class="frm_input full_input required" placeholder="카카오맵타임스탬프:예--1669399050974">
      </div>
      
      <div class="bo_w_tit write_div">
        <label for="wr_2" class="sound_only">카카오키값<strong>필수</strong></label>
          <input type="text" name="wr_2" value="<?php echo $write['wr_2'] ?>" id="wr_2" required class="frm_input full_input required" placeholder="카카오맵키값:예--2cqyu">
      </div>     
<!-- kakao map end   --> 

 

view.skin.php(pc)


<!--  kakao mat start -->
  
<style>
#tablek { border-spacing: 0; width: 100%; }
#tablek, .thk, .tdk{  border: 1px solid #ddd;border-collapse: collapse;}
.thk {  background-color: #f2f2f2; text-align: center; padding: 16px; }
.tdk { text-align: left; padding: 16px;}
</style>
<table id="tablek">
 
  <tr>
    <th class="thk">찾아오는길</th>
    <td colspan="3" class="tdk"><!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer<?php echo $view['wr_1'];?>" class="root_daum_roughmap root_daum_roughmap_landing"></div>
<!--
    2. 설치 스크립트
    * 지도 퍼가기 서비스를 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" : "<?php echo $view['wr_1']; // 지도 타임스탬프값 ?>",
        "key" : "<?php echo $view['wr_2'];       // 지도 키값 ?>",
        "mapWidth" : "640",
        "mapHeight" : "360"
    }).render();
</script></td>
  </tr>
</table>
<!--  kakao map end -->

 

view.skin.php(mobile)


<!--  kakao map start -->  
<style>
#tablek { border-spacing: 0; width: 100%; }
 .thk, .tdk{  border: 1px solid #ddd;border-collapse: collapse;}
.thk { background-color: #f2f2f2; text-align: center; padding: 6px; font-size:15px;}
.tdk { padding:1px;}
</style>
<table id="tablek">
  <tr> <th class="thk">찾아오는길</th> </tr>
  <tr> <td class="tdk"><!-- * 카카오맵 - 지도퍼가기 -->
<!-- 1. 지도 노드 -->
<div id="daumRoughmapContainer<?php echo $view['wr_1'];?>" class="root_daum_roughmap root_daum_roughmap_landing"></div>
<!--
    2. 설치 스크립트
    * 지도 퍼가기 서비스를 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" : "<?php echo $view['wr_1'];?>",
        "key" : "<?php echo $view['wr_2'];?>",
        "mapWidth" : "270",
        "mapHeight" : "200"
    }).render();
</script>
    </td>
  </tr>
</table>
<!--  kakao man end -->     

감사합니다.

추천
10

댓글 전체

전체 2,117 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT