그누보드 - 카카오맵 게시판에 적용하기

카카오맵 게시판에 적용하기 > 그누보드5 팁자료실

그누보드5 팁자료실

카카오맵 게시판에 적용하기 정보

카카오맵 게시판에 적용하기

첨부파일

kakao_map_witta.zip (69.2K) 22회 다운로드 2022-12-17 14:55:51

본문

비타주리님의 카카오맵 쉽게 사용하는 자바스크립트 함수 (https://sir.kr/g5_tip/19398)를 사용해서 게시판에 카카오맵을 넣어보았습니다.

이 함수를 사용하지 않고 그냥 카카오맵을 넣는 경우에 스크린크기에 지도크기가 리사이즈되지 않아서 모바일로 보기 불편했는데(https://sir.kr/g5_skin/52573?page=3) 마침맞게 새로운방법을 공개해주셔서 적용해보았습니다.

유용한 정보를 공개해주신 비타주리님께 감사드립니다.

write.skin.php

<!-- 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">
        
        <label for="wr_3" class="sound_only">가로100%에대한 세로비율<strong>필수</strong></label>
          <input type="text" name="wr_3" value="<?php echo $write['wr_3'] ?>" id="wr_3" required class="frm_input full_input required" placeholder="가로100%에대한 세로비율<예>50">
      </div>     
<!-- kakao map end   -->

글쓰기에서 카카오맵 타임스탬프값, 키값 그리고 지도 가로크기(100%)에 대한 세로크기값을 넣어줍니다.

view.skin.php


<!--  kakao mat start -->  
<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}
th {
  text-align: center;
  padding: 16px;
  font-size: 20px;
  font-weight: bold;
</style>
<table id="tablek">
  <tr>  <th class="thk">찾아오는길</th></tr>
  <tr>  <td class="tdk">
<script src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
<script>
function kakaoMap(...map) {
    document.write("<div id='" + "daumRoughmapContainer" + map[0] + "' class='root_daum_roughmap root_daum_roughmap_landing' style='width:100%;box-sizing:border-box'></div>");
    new daum.roughmap.Lander({
        "timestamp" : map[0], "key" : map[1], "mapWidth" : "100%",
        "mapHeight" : document.querySelector("#daumRoughmapContainer" + map[0]).offsetWidth * map[2] / 100 - 32
    }).render();
}
</script>
<script>kakaoMap("<?php echo $view['wr_1']; // 타임스탬프값 ?>", "<?php echo $view['wr_2']; // 키값 ?>", "<?php echo $view['wr_3']; // 가로 100%에 대한 세로 비율 ?>");</script>
    </td>
  </tr>
</table>
<!--  kakao map end -->

감사합니다.^^