[기능] 게시판에 다음주소검색 입력 - 카카오지도 > 정보공유

글작성시 게시판에 다음주소검색을 이용하여 상세페이지에는 해당 입력된 주소를 카카오(다음)지도로 나타내는 것을 구현해보겠습니다.

글작성시 다음주소검색을 이용하여 주소를 입력하면

다음과 같이 게시판의 상세페이지에 글작성시 주소에 입력된 주소가 카카오(다음)지도로 나타나겠습니다.

해당스킨경로의 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>