그누보드 [G4] 구글, 다음 지도 함께 사용하기
페이지 정보
본문
저장할때 사용하는 여분필드 wr_9 (주소)
1.그누보드 / skin / board / 스킨 / api.php 생성
4-1. 지도를 표시하고픈 위치에 아래 코드 추가
4-2. 페이지 최하단에 추가
1.그누보드 / skin / board / 스킨 / api.php 생성
<?php
// 다음 지도api 키값
$daum_map_key = "xxxxx";
// 다음 로컬api 키값
$daum_local_key = "xxxxx";
?>
2. 그누보드 / skin / board / 스킨 / write.skin.php
3. 그누보드 / skin / board / 스킨 / write_update.skin.php
4. 그누보드 / skin / board / 스킨 / view.skin.php
2. 그누보드 / skin / board / 스킨 / write.skin.php
<tr>
<td class=write_head>주소</td>
<td><?php
$api_map_address = $write["wr_9"];
?>
다음 지도: 서울시 구로구 구로3동 851 (번지까지만 입력, 건물명 입력 오류 발생)<br />
구글지도: 서울시 구로구 구로3동 851 한화비즈메트로1차 1502호 (건물명 입력안해도 검색가능)<br />
<input name="wr_9" id="api_map_address" itemname="주소" value="<?php echo $api_map_address; ?>" style="width:400px;" class="tx" />
<!-- 다음 지도 시작-->
<a href="javascript:confirmMap();" class="button"><span>Daum 지도확인</span></a>
<script type="text/javascript">
<!--
function confirmMap() {
var temp = encodeURI(document.getElementById('api_map_address').value);
var lo = "<?php echo $board_skin_path; ?>/confirm_map.php?api_map_address="+temp;
window.open(lo,'cate','scrollbars=yes, width=700, height=600');
}
//-->
</script>
<!-- 다음 지도 끝 -->
<!-- 구글 지도 시작 -->
<a href="javascript:win_google_map()" class="button"><span>Google 지도확인</span></a>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" charset='UTF-8'></script>
<script type="text/javascript">
<!--
function google_map(mapid, addr) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': addr }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var map = new google.maps.Map(document.getElementById(mapid), {
zoom: 15,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({map: map, position: map.getCenter()});
}
});
}
function win_google_map() {
$("#dialog-map").dialog({
width: 550,
autoOpen: false,
//modal: true,
resizable: false,
buttons: {
"Colse": function () {
$(this).dialog("close");
}
}
});
$("#dialog-map").dialog("open");
$("#google-map").css("display", "block");
$("#google-map").html("");
google_map("google-map", $("#api_map_address").val());
}
//-->
</script>
<div id="dialog-map" class="dialog-content">
<div id="google-map" style="border:1px solid #999; width:500px; height:300px; margin:10px; display:none;"></div>
</div>
<!-- 구글 지도 끝 -->
</td>
</tr>
<tr><td colspan="2" height="1" bgcolor="#dddddd"></td></tr>
3. 그누보드 / skin / board / 스킨 / write_update.skin.php
4. 그누보드 / skin / board / 스킨 / view.skin.php
4-1. 지도를 표시하고픈 위치에 아래 코드 추가
<tr>
<td>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<?php
$api_map_address = $view["wr_9"];
if ($api_map_address) {
include_once "api.php"; // api 키 설정
// 지도 시작
$daum_map_address = $api_map_address;
echo "<script type='text/javascript' src='http://apis.daum.net/maps/maps2.js?apikey=". $daum_map_key ."' charset='UTF-8'></script>";
// 지도 안보이면 아래 한줄 주석
$daum_map_address = iconv("euc-kr","utf-8",$daum_map_address); // euc-kr --> UTF-8 변경
$daum_map_address = urlencode($daum_map_address);
// 여기부터 주소 검색 xml 파싱
$daum_pquery = "apikey=$daum_local_key". "&q=". $daum_map_address . "&output=xml";
$fp = fsockopen ("apis.daum.net", 80, $errno, $errstr, 30);
if (!$fp) {
echo "$errstr ($errno)";
} else {
fputs($fp, "GET /local/geo/addr2coord?");
fputs($fp, $daum_pquery);
fputs($fp, " HTTP/1.1\r\n");
fputs($fp, "Host: apis.daum.net\r\n");
fputs($fp, "Connection: Close\r\n\r\n");
$header = "";
while (!feof($fp)) {
$out = fgets ($fp,512);
if (trim($out) == "") {
break;
}
$header .= $out;
}
$daum_mapbody = "";
while (!feof($fp)) {
$out = fgets ($fp,512);
$daum_mapbody .= $out;
}
$daum_idx = strpos(strtolower($header), "transfer-encoding: chunked");
if ($daum_idx > -1) { // chunk data
$temp = "";
$offset = 0;
do {
$idx1 = strpos($daum_mapbody, "\r\n", $offset);
$chunkLength = hexdec(substr($daum_mapbody, $offset, $idx1 - $offset));
if ($chunkLength == 0) {
break;
} else {
$temp .= substr($daum_mapbody, $idx1+2, $chunkLength);
$offset = $idx1 + $chunkLength + 4;
}
} while(true);
$daum_mapbody = $temp;
}
fclose ($fp);
}
// 여기까지 주소 검색 xml 파싱
// 여기부터 좌표값 변수에 등록
$daum_map_x_point_1=explode("<lng>", $daum_mapbody);
$daum_map_x_point_2=explode("</lng>", $daum_map_x_point_1[1]);
$daum_map_x_point=$daum_map_x_point_2[0];
$daum_map_y_point_1=explode("<lat>", $daum_mapbody);
$daum_map_y_point_2=explode("</lat>", $daum_map_y_point_1[1]);
$daum_map_y_point=$daum_map_y_point_2[0];
// 여기까지 좌표값 변수에 등록
echo "주소 : ". $api_map_address ."<br />";
// 좌표 X, Y 찾은경우
if($daum_map_x_point && $daum_map_y_point) {
echo "지도좌표 : x:". $daum_map_y_point ." y:". $daum_map_x_point ."<br />";
// 다음 지도 시작
echo "<script type='text/javascript' src='http://apis.daum.net/maps/maps3.js?apikey=". $daum_map_key ."'></script>";
?>
<script type="text/javascript">
<!--
//window.onload = function() {
var daum_map;
function initialize_daum() {
daum_map = new daum.maps.Map(document.getElementById('daum_map'), {
center: new daum.maps.LatLng(<?php echo $daum_map_y_point; ?>,<?php echo $daum_map_x_point; ?>),
level: 4
});
var points = [
new daum.maps.LatLng(<?php echo $daum_map_y_point; ?>,<?php echo $daum_map_x_point; ?>)
];
var icon = [
new daum.maps.MarkerImage(
'http://i1.daumcdn.net/imap/apis/n_local_blit_04.png',
new daum.maps.Size(19, 24),
new daum.maps.Point(16,34),
"poly",
"1,20,1,9,5,2,10,0,21,0,27,3,30,9,30,20,17,33,14,33"
)
];
//마커 위치 설정
var marker = [
new daum.maps.Marker({position: points[0], image: icon[0]})
];
marker[0].setMap(daum_map);
};
//-->
</script>
<table width="100%" cellpadding="0" cellspacing="3" bgcolor="#f4f4f4">
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="0" cellspacing="1" bgcolor="#cccccc" >
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="3" cellspacing="1" bgcolor="#eeeeee">
<tr><td bgcolor="#ffffff"><div id="daum_map" style="width:100%; height:500px; z-index:100; border:1px solid #ccc;"></div></td></tr>
</table></td></tr>
</table></td></tr>
</table>
<?php
// 다음 지도 끝
// 구글 지도 시작
$google_map_address = $api_map_address;
echo $google_map_address;
//$google_map_address = iconv("euc-kr","utf-8",$google_map_address); // euc-kr --> UTF-8 변경
?>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&language=ko"></script>
<script type="text/javascript">
<!--
var map;
function initialize_google() {
var myLatlng = new google.maps.LatLng(<?php echo $daum_map_y_point; ?>, <?php echo $daum_map_x_point; ?>);
var myOptions = {
zoom: 16,
scaleControl: true,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// 리스너 Listener ////////////////////////////////////////////////////
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();
if (zoomLevel > 19) {
map.setZoom(19);
}
if (zoomLevel < 1) {
map.setZoom(1);
}
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Here"
});
}
//-->
</script>
<table width="100%" cellpadding="0" cellspacing="3" bgcolor="#f4f4f4">
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="0" cellspacing="1" bgcolor="#cccccc">
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="3" cellspacing="1" bgcolor="#eeeeee">
<tr><td bgcolor="#ffffff"><div id="map"><div id="map_canvas" style="width:100%; height:500px; border:1px solid #ccc;"></div></div></td></tr>
</table></td></tr>
</table></td></tr>
</table>
<?php
// 구글 지도 Tyle1 끝
// x, y 좌표 없는 경우
} else {
// 구글 지도 Tyle2 시작
$google_map_address = $api_map_address;
echo $google_map_address;
//$google_map_address = iconv("euc-kr","utf-8",$google_map_address); // euc-kr --> UTF-8 변경
?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
<!--
function google_map(mapid, addr) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': addr }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var map = new google.maps.Map(document.getElementById(mapid), {
zoom: 15,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({map: map, position: map.getCenter()});
}
});
}
/*$(document).ready(function () {
google_map("google_map", "<?php echo addslashes($google_map_address); ?>");
});*/
function initialize_google2() {
google_map("google_map", "<?php echo addslashes($google_map_address); ?>");
}
//-->
</script>
<table width="100%" cellpadding="0" cellspacing="3" bgcolor="#f4f4f4">
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="0" cellspacing="1" bgcolor="#cccccc" >
<tr><td bgcolor="#ffffff"><table width="100%" cellpadding="3" cellspacing="1" bgcolor="#eeeeee">
<tr><td bgcolor="#ffffff"><div id="google_map" style="width:100%; height:500px; border:1px solid #ccc; margin:0 0 0px 0;"></div></td></tr>
</table></td></tr>
</table></td></tr>
</table>
<?php
// 구글 지도 Tyle2 끝
}
}
// 지도 끝
?>
4-2. 페이지 최하단에 추가
<!-- 지도 onload 중복 처리 시작 -->
<script type="text/javascript">
<!--
<? if ($google_map_address) { ?>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
<? if ($daum_map_x_point && $daum_map_y_point) { ?>
addLoadEvent(initialize_google);
addLoadEvent(initialize_daum);
<? } else { ?>
addLoadEvent(initialize_google2);
<?php } } ?>
//-->
</script>
<!-- 지도 onload 중복 처리 끝 -->
참고자료
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=117807
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=121673
참고자료
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=117807
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=121673
댓글목록
등록된 댓글이 없습니다.