게시판에 카카오 맵 넣기 정보
게시판 게시판에 카카오 맵 넣기관련링크
첨부파일
본문
게시판에 카카오맵을 넣어보았습니다.
압축을 풀면 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