구글지도 대신에 다음지도 적용하기

구글지도 대신에 다음지도 적용하기

구글지도 대신에 다음지도 적용하기

1. 우선 다음 http://developers.daum.net 에 가셔서 api 키 값을 받아옵니다.

 

2. 게시판 view 스킨 페이지에

<?php if ($view['map_x']&&$view['map_y']) { ?> 

<div id="map" style="width:80%;height:480px;"></div> 

<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=api 키 값"></script>

<script>

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

    mapOption = { 

        center: new daum.maps.LatLng(<?=$view['map_x'] ?>, <?=$view['map_y'] ?>), // 지도의 중심좌표

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

    };

 

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다

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

 

// 지도에 마커를 생성하고 표시한다

var marker = new daum.maps.Marker({

    position: new daum.maps.LatLng(<?=$view['map_x'] ?>, <?=$view['map_y'] ?>), // 마커의 좌표

    map: map // 마커를 표시할 지도 객체

})

</script>

<?php } ?> 

 

3. 게시판 write 스킨 페이지에

<div class="form-group">

<label class="col-sm-2 control-label">다음지도</label>

<div class="col-sm-4">

<input type="text" name="map_x" id="map_x" value="<?php echo $write['map_x']; ?>" class="form-control input-sm" size="20"> <input type="text" name="map_y" id="map_y" value="<?php echo $write['map_y']; ?>" class="form-control input-sm" size="20">

</div>

</div>

 

이런 식으로 넣어줍니다.

 

4. 위에서 보시면 게시판에 map_x와 map_y 필드를 추가했습니다.

   추가하시기 싫으신 분은 wr_7, wr_8 같은 여분필드를 사용하셔도 되겠네요.

   혹시 게시판에 필드를 추가해서 사용하시는 분들은 ./bbs/write_update.php 파일에서도 추가해 주셔야 해요.