(1/16수정)게시물 내용에 네이버 지도 api 연동하여 지도 표시하기 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

(1/16수정)게시물 내용에 네이버 지도 api 연동하여 지도 표시하기 정보

(1/16수정)게시물 내용에 네이버 지도 api 연동하여 지도 표시하기

첨부파일

map.php (4.1K) 1686회 다운로드 2008-01-16 12:14:37
map_utf8.php (4.1K) 545회 다운로드 2008-01-16 12:17:34

본문

프로그래밍도 거의 모르는 제가 맨땅에 헤딩하듯 만들었습니다.

xml 파싱하는 소스가 조금 불안정 할 듯 하네요.

(소스 퍼서 약간 변형했습니다. php나 자바 자체를 잘 몰라 모르는건 나두었습니다.ㅡ,.ㅡ;;)

사용법은 첨부파일을 다운 받아서 사용하고자 하는 스킨폴더에 넣어두신후

스킨폴더에 있는 view.skin.php에서 출력하고자 하는 부분에

<?
// 지도 표시
include_once "./map.php";
?>
이런식으로 인클루드 시켜주면 됩니다.

현재 주소는 여유필드중 4번 필드에 저장이 되어 있어 4번 필드에 있는 주소 정보를 가져오게 했습니다.

map.php 파일에 달 수 있는 주석은 거의 다 달아 두었으니 필요에 따라 수정해서 쓰시면 됩니다.


---------------------------------------------

1월 16일 물길님이 수정해주신 utf-8용도 올려둡니다.

추천
9

댓글 39개

수정 사항 입니다.

// 쿼리 돌릴 주소
$map_query=str_replace(" ","",$view[wr_4]); // 4번 여유 필드에 저장 되어 있는 주소의 공백을 제거하여 변수에 저장
이 부분을 아래 같이 바꾸어 주세요


// 쿼리 돌릴 주소
$map_query=str_replace(" ","%20",$view[wr_4]); // 4번 여유 필드에 저장 되어 있는 주소의 공백을 %20으로 치환하여 변수에 저장
제가 잘 몰라서 그러는데

http://maps.naver.com/js/naverMap.naver?key=여기에도 네이버 지도 키 값을 넣어 주세요" 이건 설명을 해주셔야 될듯합니다.

사용 방법을 잘 모르겠습니다..
잘 됩니다 ^__^ 기냥 view스킨에 코드를 모두 복사해서 넣었더니 되네요 ^^;;
http://www.suwoncity.net/114/bbs/board.php?bo_table=03_01&wr_id=15&page=&sfl=&stx=&sst=&sod=&spt=&page=
직접적어넣으면 그 곳만 표시가 되겠죠
주소를 쓰는 게시판 같은 경우 하나의 필드를 주소저장필드로 쓰고 저 같은 경우
그 필드가 4번인 거죠.
음.. 주소추가 주소등록 주소검색 등으로 검색해보시면 어느정도 이해가 가실거라 생각합니다.
좋은팁 감사합니다 ~ 예전에 네이버 맵 달고싶었었는데 이렇게 쉽게 해결되네요 ^^;;
다시한번 감사 드립니다~
참으로 유용한 자료입니다. 감사드립니다. 혹시, utf-8 버전에서는 안되는게 맞나요.
제가 설치를 잘 못했는지 동작이 되지 않네요. 간단히 수정하는 방법이 있으면 알려주시면 감사하겠습니다. 새해~ 복많이 받으시기 바랍니다.
으음..테스트는 못해보았습니다만, utf-8이든 아니든 문제 없을 거라 생각됩니다만

어떻게 에러가 뜨는질 모르겠군요. 에러메시지라도 보면 어느정도 감이 잡힐 듯 도 합니다만 ㄷㄷ

물길님도 새해복 많이 받으세요~!!
아이고~ 답신을 이렇게 빨리 주셨네요 ^^;
에러 메세지는 이 부분이.  원본 파일 62줄.......  header("Content-Type: text/xml; charset=utf-8");
이미 실행되었다는 내용같습니다만 ..........
먼저 말씀을 드렸어야 할 사항이었는지 모르겠습니다만, 제가 이 소스를 테크노트 게시판에 소개를 했습니다. 자료를 가져다 올리는 것이 결례일 것 같아서 링크를 하고 테크노트에 삽입하기 위한 간단한 수정방법을 같이 적었었죠.
그누보드 외 테크노트 게시판에서도~ urf-8버전에서는 같은 내용의 에러가 나더군요.
아래는 소개한 사이트입니다. 감사합니다.
http://technote.co.kr/php/technote1/board.php?board=apple&config=&command=body&no=551&
62줄을 삭제 하고 한 번 돌려보십시오. 제가 어떻게 테스트 해볼 여건은 안되네요.;
xml 파싱 소스는 저도 봐도 잘 모르겠더라구요...ㅡㅠ
아무래도 프로그래밍도 잘 모르는데 끄적끄적 거린 소스라..ㄷㄷ
그리고 utf-8에서 또 에러가 생길수 있는게 글자 자르기 부분인데.
일단 62번째 줄 삭제후 해보시고 답글 달아주세요~!
.........................
아 그리고 자료 가져다 올리셔도 상관없습니다~ㅅ~
미처 말씀을 못 드렸네요. 지우면 에러 메세지 없이 안 나오더군요. 아마도 문자(주소)를 인식하지 못하는 문제 같은데~
어찌되었건, 관심 갖어주셔서 대단히 감사합니다. 잘 모르지만 계속 연구해 보겠습니다. 넓으신 마음으로 자료 공유에 흔쾌이 답해주신 점에 대하여도 감사드립니다.
저도 이런 저런 소스를 토대로 만든거라서..ㄷㄷㄷ;;
$mapbody만 echo 시켜보시고 xml 소스가 출력되면 xml 파싱에는 문제가 없는거라 생각합니다.
utf-8 환경에서~ 성공했습니다. ^^
원본 파일........ 에서

// 쿼리 돌릴 주소
............

아래에~ 다음 두줄을 추가합니다.

// euc-kr로 변환
$map_cquery =iconv("utf-8","euc-kr","$map_query");   

수정 : 그 다음 줄에서 $map_query 을 $map_cquery 로 수정합니다.


62줄을 삭제합니다.
삭제=>    header("Content-Type: text/xml; charset=utf-8"); 

그누보드와 테크노트 보드에서 이상없이 실행되는 것을 확인했습니다.
------------------------------------------------------------------
참고 :  네이버 geocode.php 파일이 euc-kr로 받으며,
        출력 xml 파일도 인코딩 정보를 보면 euc-kr 로 나온다는 지적이 있네요.
        출처 : http://cafe.naver.com/openapi.cafe

서누니님 ! 덕분에 많은 공부를 합니다.
대단히 감사합니다.
// 지도의 폭
$map_width = 600;

// 지도의 높이
$map_height = 400;

// 지도의 축적 1~11 사이의 자연수. 1에 가까울 수록 지도가 확대
$map_zoom = 2;
$map_query = str_replace(" ","%20",$write[wr_4]);
$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL,"http://maps.naver.com/api/geocode.php?key=네이버지도키&query=$map_query"); //접속할 URL 주소
curl_setopt ($ch, CURLOPT_SSL_VERIFYPEER, FALSE); // 인증서 체크같은데 true 시 안되는 경우가 많다.
// default 값이 true 이기때문에 이부분을 조심 (https 접속시에 필요)
curl_setopt ($ch, CURLOPT_SSLVERSION,3); // SSL 버젼 (https 접속시에 필요)
curl_setopt ($ch, CURLOPT_HEADER, 0); // 헤더 출력 여부
curl_setopt ($ch, CURLOPT_POST, 1); // Post Get 접속 여부
curl_setopt ($ch, CURLOPT_TIMEOUT, 15); // TimeOut 값
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); // 결과값을 받을것인지
$result = curl_exec ($ch);
curl_close ($ch);

$map_x_point_1=explode("<x>", $result);
$map_x_point_2=explode("</x>", $map_x_point_1[1]);
$map_x_point=$map_x_point_2[0];

$map_y_point_1=explode("<y>", $result);
$map_y_point_2=explode("</y>", $map_y_point_1[1]);
$map_y_point=$map_y_point_2[0];


fsockopen 대신 curl을 사용한 소스입니다.
fsockopen이 느리신 분들은 한번 대체해서 써보시면 좋을듯합니다.

그리고 utf-8 환경이신 분들은

http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=qna_function&wr_id=210334&page=1

여기 참조 해 보시면 좋은 정보 얻을 수 있을것 같습니다.
제꺼는 utf-8 이 아닌데도 지도가 안나왔는데
header("Content-Type: text/xml; charset=utf-8");  삭제하니 바로 되네요..
잘쓸께요~ ^^
http://www.sir.co.kr/bbs/tb.php/g4_tiptech/13638/1c8d23f9b377cb9d381dd89e64814a86
주소의 map.php 를 보면 아래와 같은 부분이 있는데요.

// 쿼리 돌릴 주소
$map_query=str_replace(" ","%20",$view[wr_4]); // 4번 여유 필드에 저장 되어 있는 주소의 공백을 제거하여 변수에 저장

여기서 궁금한것이 시그너스님의 구인구직
 http://www.sir.co.kr/bbs/tb.php/g4_skin/26493/fc24fb341f070d7b146429bf75687132
를 설치 하였더니 주소를 자동으로 찾을수 있게 되었습니다.

해서 write_update.skin.php 의 내용을 봤더니. 아래와 같은 내용이 있었습니다.
 
$wr_3 = "$ext3_00|$ext3_01|$ext3_02|$ext3_03|$ext3_04|$ext3_05|$ext3_06|$ext3_07|$ext3_08|$ext3_09";
$sql3 = " update $write_table set wr_3 = '$wr_3' where wr_id = '$wr_id' ";
sql_query($sql3);

위부분이 주소가 저장되는 부분인데. 그중에 $ext3_02 와  $ext3_03 부분에 주소 와  상세주소 가 들어가는 부분입니다.  그렇다면  map.php 중 (" ","%20",$view[wr_4]);  부분에 (" ","%20",$view[wr_3]);  으로만 대체하면 되나요? 이건 아닌거 같은데.. 실제로 안되구요. 어떤식으로 적어줘야 할까요?

그리고 네이버네 api 주소 요청할대 주소를 http://abc.abc.com  (호스팅 기본주소) 이렇게 적어주면되나요?
$ext3_02와 $ext3_03에 정확히 어떤 주소가 들어가는지 모르겠지만
예를 들어 쿼리에 들어갈 주소 형식은 "경기도 고양시 덕양구 머머동 머머다시머머"
이런식입니다. $ext3_02와 $ext3_03를 합쳐서 하나의 변수로 저장을 하시고

// 쿼리 돌릴 주소
$map_query=str_replace(" ","%20",$합친변수); //  $ext3_02와 $ext3_03에 저장 되어 있는 주소의 공백을 제거하여 변수에 저장
서누니님~ 질문하나 드릴께욤~

// 등록한 키를 이용하여 네이버 지도 API 를 사용하기 위한 준비를 합니다.
<SCRIPT LANGUAGE="JavaScript" src="http://maps.naver.com/js/naverMap.naver?key="></SCRIPT>
<div id='mapContainer' style='width:300px;height:300px'></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var cnt = 0;


function createMarker(pos,count,content)
{
var iconUrl = 'http://static.naver.com/local/map_img/set/icos_free_'+String.fromCharCode(96+count)+'.gif';
var marker = new NMark(pos,new NIcon(iconUrl,new NSize(15,14)));
NEvent.addListener(marker,"mouseover",function(pos){infowin.set(pos,"<TABLE style='width:100px;height:50px;border:solid 1px #666666'><TR><TD>"+content+"</TD></TR></TABLE>");infowin.showWindow()});
NEvent.addListener(marker,"mouseout",function(){infowin.hideWindow();});
return marker;
}

function clickMap(pos)
{
if (cnt>=10)
{
alert('이 예제에서는 10개까지만 추가 가능합니다.');
return;
}

cnt++;
mapObj.addOverlay(createMarker(pos,cnt,"ㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ"+cnt));
}
var mapObj = new NMap(document.getElementById('mapContainer'),300,300);
var infowin = new NInfoWindow();

mapObj.setCenterAndZoom(new NPoint(321198,529730),3);

mapObj.addOverlay(infowin);


NEvent.addListener(mapObj,"click",clickMap);

//-->
</SCRIPT>

위에 있는 예제는요~
좌표값을 읽어와서 저장하는거 같은데요~
이걸이용해서 업체를 알릴수 있게끔 할수 있을까요??
연동이 제일 어려운 부분같은데,, ㅜㅜ
정확하게 어떤걸 원하시는지 잘 모르겠습니다만
제가 올린 소스에 보면 출력부분이 자바스크립트로 되어있습니다.
그곳을 필요한 만큼 수정하시면 될듯 하구요

$map_x_point와 $map_y_point 변수에 좌표가 저장되게 되었습니다.
즉 님이 올리신 소스중
NPoint(321198,529730),
이걸 예로 든다면
NPoint(<?=$map_x_point?>,<?=$map_y_point?>),
이런식으로 활용이 가능하다는 이야기입니다아~~~~
아직 감이 않잡혀서 어떻게 대입 시켜야 할지 막막하지만

천천히 감을 잡고 꼭 대입 시키도록 하겠습니다.

정말 감사드립니다.
좋은 강좌 감사합니다. 추천 꾹 눌렀습니다.~~~
서누님의 강좌를 이렇게 정리해서 사용하고 있습니다.  ^__^ 
제가 정리한 내용의 이미지는 아래에서 받을수 있습니다.
http://happyjung.com/gnuboard/bbs/board.php?bo_table=lecture&wr_id=1231

<?php
$map_width = 695;  // 지도의 폭 = 테이블 폭 - 5px
$map_height = 395;  // 지도의 높이 = 테이블 높이 - 5px
$map_key = "xxxxxxxxx";  // 네이버 지도api 키값
//$real_address = "서울시 구로구 구로3동 851"; // 주소
$real_address = $write[wr_4]);
$map_query = str_replace(" ","",$real_address); // 공백을 제거
 
// 지도의 축적 1~11 사이의 자연수. 1에 가까울 수록 지도가 확대
$map_zoom = 2;
 
// euc-kr로 변환
$map_cquery =iconv("utf-8","euc-kr","$map_query");
 
// 여기부터 주소 검색 xml 파싱
$pquery = "key=". $map_key. "&query=". $map_query;
    $fp = fsockopen ("maps.naver.com", 80, $errno, $errstr, 30);
    if (!$fp) {
        echo "$errstr ($errno)";
    } else {
        fputs($fp, "GET /api/geocode.php?");
        fputs($fp, $pquery);
        fputs($fp, " HTTP/1.1\r\n");
        fputs($fp, "Host: maps.naver.com\r\n");
        fputs($fp, "Connection: Close\r\n\r\n");
       
        $header = "";
        while (!feof($fp)) {
            $out = fgets ($fp,512);
            if (trim($out) == "") {
                break;
            }
            $header .= $out;
        }
       
        $mapbody = "";
        while (!feof($fp)) {
            $out = fgets ($fp,512);
            $mapbody .= $out;
        }
       
        $idx = strpos(strtolower($header), "transfer-encoding: chunked");
       
        if ($idx > -1) { // chunk data
            $temp = "";
            $offset = 0;
            do {
                $idx1 = strpos($mapbody, "\r\n", $offset);
                $chunkLength = hexdec(substr($mapbody, $offset, $idx1 - $offset));
               
                if ($chunkLength == 0) {
                    break;
                } else {
                    $temp .= substr($mapbody, $idx1+2, $chunkLength);
                    $offset = $idx1 + $chunkLength + 4;
                }
            } while(true);
            $mapbody = $temp;
        }
        //header("Content-Type: text/xml; charset=utf-8");
        fclose ($fp);
    }   
// 여기까지 주소 검색 xml 파싱
 
 
// 여기부터 좌표값 변수에 등록
$map_x_point_1=explode("<x>", $mapbody);
$map_x_point_2=explode("</x>", $map_x_point_1[1]);
$map_x_point=$map_x_point_2[0];
 
$map_y_point_1=explode("<y>", $mapbody);
$map_y_point_2=explode("</y>", $map_y_point_1[1]);
$map_y_point=$map_y_point_2[0];
// 여기까지 좌표값 변수에 등록
 
echo "<script type='text/javascript' src='http://maps.naver.com/js/naverMap.naver?key=". $map_key ."'></script>";
?>
 
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="padding:0 0 10px 0;"><img src="img/map_txt.jpg" alt="지도 이용방법" /></td>
  </tr>
  <tr>
    <td><table width="<?php echo $map_width; ?>" cellpadding="0" cellspacing="3" bgcolor="#f4f4f4">
      <tr>
        <td bgcolor="#ffffff"><table cellpadding="0" cellspacing="1" bgcolor="#cccccc" >
          <tr>
            <td bgcolor="#ffffff"><table cellpadding="3" cellspacing="1" bgcolor="#eeeeee">
              <tr>
                <td bgcolor="#ffffff"><div id='mapContainer'></div></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="right" style="padding:0 3px 5px 0;"><img src="img/map_openapi.gif" alt="네이버 OPENAPI" /></td>
  </tr>
</table>
 
<script type="text/javascript">
<!--
  var x_point = <?php echo $map_x_point; ?>;
  var y_point = <?php echo $map_y_point; ?>;
  // 아이콘파일을 계정에 만드시고(지정된 위치에 표시되는 아이콘입니다) 이미지 주소 및 크기를 변경해주세요
  var icon = new NIcon("./images/map_icon.png", new NSize(33,53));
  var loc_Point = new NPoint(x_point,y_point); // 포인트 표시
  var map_mark = new NMark(loc_Point, icon ); // 지도에 아이콘 표시
  var mapObj = new NMap(document.getElementById('mapContainer'),<?php echo $map_width; ?>,<?php echo $map_height; ?>); // 지도창
  var infowin = new NInfoWindow();
  var zoom = new NZoomControl();
  var zoomlevel = <?php echo $map_zoom; ?>
 
  mapObj.addOverlay(map_mark); // 지도에 마크표시
  mapObj.setCenterAndZoom(loc_Point,zoomlevel); // 지도 중앙
  mapObj.addOverlay(infowin);
  zoom.setAlign("left"); // 줌 조절 버튼 왼쪽에 위치
  zoom.setValign("bottom"); // 줌 조절 버튼 아래에 위치
  mapObj.addControl(zoom);
//-->
</script>
전체 3,313 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT