글작성시 게시판에 다음주소검색을 이용하여 상세페이지에는 해당 입력된 주소를 카카오(다음)지도로 나타내는 것을 구현해보겠습니다.
다음과 같이 게시판의 상세페이지에 글작성시 주소에 입력된 주소가 카카오(다음)지도로 나타나겠습니다.
해당스킨경로의 write.skin.php 파일의 최상단에 아래의 소스를 추가합니다.
<?php
/* 해당스킨경로/write.skin.php */
add_javascript(G5_POSTCODE_JS, 0); //다음 주소 js
// 주소입력
$wr1 = explode('|',$write['wr_1']);
$ex_zip = $wr1[0];
$ex_addr1 = $wr1[1];
$ex_addr2 = $wr1[2];
$ex_addr3 = $wr1[3];
$ex_jibeon = $wr1[4];
?>
그리고 중간쯤에 제목과 내용이 있는 부분 중 원하는 위치에 다음우편번호 소스를 추가합니다.
/* 해당스킨경로/write.skin.php */
<tr>
<th scope="row"><label for="wr_1">주소</label></th>
<td>
<label for="ex_zip" class="sound_only">우편번호</label>
<input type="text" name="ex_zip" value="<?php echo $ex_zip; ?>" id="ex_zip" class="frm_input" size="6" maxlength="6">
<button type="button" class="btn_frmline" onclick="win_zip('fwrite', 'ex_zip', 'ex_addr1', 'ex_addr2', 'ex_addr3', 'ex_jibeon');">주소 검색</button><br>
<input type="text" name="ex_addr1" value="<?php echo $ex_addr1; ?>" id="ex_addr1" class="frm_input frm_address" size="50">
<label for="ex_addr1">기본주소</label><br>
<input type="text" name="ex_addr2" value="<?php echo $ex_addr2; ?>" id="ex_addr2" class="frm_input frm_address" size="50">
<label for="ex_addr2">상세주소</label>
<br>
<input type="text" name="ex_addr3" value="<?php echo $ex_addr3; ?>" id="ex_addr3" class="frm_input frm_address" size="50" readonly="readonly">
<label for="ex_addr3">참고항목</label>
<input type="hidden" name="ex_jibeon" value="<?php echo $ex_jibeon; ?>">
</td>
</tr>
해당스킨경로에 write_update.skin.php 파일을 생성하고 아래의 소스를 추가합니다.
<?php
/* 해당스킨경로/write_update.skin.php */
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
function kakao_request($path, $query, $content_type = 'json', $api_key)
{
$api_server = 'https://dapi.kakao.com';
$headers = array('Authorization: KakaoAK '.$api_key.'');
$opts = array(
CURLOPT_URL => $api_server . $path . '.' . $content_type . '?' . $query,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_SSL_VERIFYPEER => false,
CURLOPT_SSLVERSION => 1,
CURLOPT_HEADER => false,
CURLOPT_HTTPHEADER => $headers
);
$curl_session = curl_init();
curl_setopt_array($curl_session, $opts);
$return_data = curl_exec($curl_session);
if (curl_errno($curl_session)) {
throw new Exception(curl_error($curl_session));
} else {
//print_r(curl_getinfo($curl_session));
curl_close($curl_session);
return json_decode($return_data, true);
}
}
$path = '/v2/local/search/address';
$content_type = 'json'; // json or xml
$params = http_build_query(array(
'page' => 1,
'size' => 10,
'query' => $ex_addr1
));
$api_key = 'bb0d01bee89e91a1aca586e8a6428305';
$res = kakao_request($path, $params, $content_type, $api_key);
$wr_longitude = $res['documents'][0]['x'];
$wr_latitude = $res['documents'][0]['y'];
// 주소
$wr_1 = "$ex_zip|$ex_addr1|$ex_addr2|$ex_addr3|$ex_jibeon";
$sql = " update {$write_table} set wr_1 = '{$wr_1}', wr_longitude = '{$wr_longitude}', wr_latitude = '{$wr_latitude}' where wr_id = '{$wr_id}' ";
sql_query($sql);
?>
이제 해당스킨경로의 view.skin.php 파일의 상단에 아래의 소스를 추가합니다.
<?php
/* 해당스킨경로/write.skin.php */
// 주소
$wr1 = explode('|',$view['wr_1']);
$ex_zip = '('.$wr1[0].')';
$ex_addr1 = $wr1[1];
$ex_addr2 = $wr1[2];
$ex_addr3 = $wr1[3];
$ex_jibeon = $wr1[4];
?>
지도가 나타나기 원하는 위치에 아래의 소스를 추가합니다.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=bb0d01bee89e91a1aca586e8a6428305&libraries=services,clusterer,drawing"></script>
<script>
$(function () {
var geocoder = new daum.maps.services.Geocoder();
var container = document.getElementById('map');
var map;
showMap('<?php echo $view['wr_latitude'];?>', '<?php echo $view['wr_longitude'];?>');
function showMap(latitude,longitude)
{
var coords = new daum.maps.LatLng(latitude, longitude);
var options = {
center: coords,
level: 3
};
map = new daum.maps.Map(container, options);
var marker = new daum.maps.Marker({
map: map,
position: coords
});
var infowindow = new daum.maps.InfoWindow({
content: '<div style="width:220px;text-align:center;padding:6px 0;"><?php echo "{$ex_addr1} {$ex_addr2} <br> {$ex_addr3}";?></div>'
});
infowindow.open(map, marker);
}
})
</script>
<div id="map" style="width:500px;height:400px;"></div>