DAUM 지도 API 테스트
This post was written on December 13, 2009

방금 테이블 하나를 날려서 이 글을 다시 쓰게 되네요.. ㅜ.ㅜ
상상도 안해봤습니다.
다시 쓰는 거. ㅋㅋ

하지만 언젠가 소중한 자료가 될 부분이니 다시 씁니다. ^^

DAUM OPEN API 중 지도 API를 테스트 혹은 공부?를 해보았습니다.
오픈 API라는게 결국 XML(RSS)을 가져와서 파싱해서 그 값을 사용하는 것입니다.
결국 프로그래머에게 필요한 기술은 자바스크립트로 XML을 파싱하는게 다입니다.

물론! 쉽게 말했지만 그냥 마구마구 쉬운 것만은 아니지요. ;;;^^

아래는 다음의 OPEN API의 홈인데요.

다음오픈API홈

보시다시피 여러가지 API가 준비되어있습니다.
위에 빨간색 부분을 보시면 지도 API의 종류가 나열되어있습니다.

사실 지도 API라고 하면 기본적으로 좌표를 받아서 이미지를 뿌려주는 것이 가장 중요한데요.
그 가장 중요한 부분은 이미 다음 측에서 쉽게 할 수 있도록
js파일을 제공하고요.(※ 실제로는 이 js 파일이 api 혹은 sdk라고 볼 수 있습니다.)
우리는 그 js파일의 여러가지 기능(클래스, 함수)들을 이용하여 맵의 위치 변화 등을 할 수 있습니다.

그리고 위 빨간색 부분의 나머지 API들은 실질적으로는 지도 API와는 크게 상관없지만
지도 API를 위해 꼭 존재해야 하는 API들입니다.
주소를 좌표로, 좌표를 주소로, 좌표를 다른 좌표로 바꾸어주는 API 들인데요.

사실 IP를 좌표로 바꾸어주는 API가 정말 재미있는 건데요. ^^
당분간 IP->좌표는 타 사이트에서 찾아보아야 할 것 같습니다.
저같은 경우에는 주소를 입력하면 해당위치의 지도가 뿌려지는 형태로 만들어보았습니다.
물론^^ 그게 가장 기본일 것 같습니다.

OPEN API들이 다 그렇듯이 기본적으로 API키가 필요하고요.
키는 손쉽게 발급받을 수 있습니다.

키를 발급받게 되면 기본적인 예제가 하나 주어집니다.
//apis.daum.net/maps/maps2.js 가 인쿠르드되어있고,
DIV박스 하나와 maps2.js를 이용하여 맵을 처음 생성시켜주는 부분 등이 포함된 예제파일입니다.

예제파일이 굉장히 간편하게 되어있습니다.

주소를 입력받아서 지도에 해당 결과를 나타나게 하려면
주소를 좌표로 변환시키는 API를 이용해야하고요.
프로그래밍 방식은 주소를 입력받아서 입력받을 결과를
주소->좌표API에 쏘고, 거기서 받은 XML(RSS) 혹은 json 파일을
쓸 수 있도록 파싱하여, 파싱한 결과값에서 경도와 위도를 추출합니다.
추출한 결과값을 이용하여 현재 뿌려져 있는 다음 맵의 화면을 이동시켜주면 되겠습니다.

주소를 입력받으면 지도에서 주소의 위치를 찾는 프로그램을 만들어보았는데요.
주소에서 번지수까지 입력을 받는 것 같고요.

일부 주소가 아닌 경우에는 결과값이 나오지 않습니다.
예를 들어서 저는 장안1동에 사는데 장한평 역으로 검색을 하면 결과값이 없는 거지요.
정확한 주소가 필요한 것 같습니다.^^;(융통성이 없어요. ㅋ)

결과물은 아래와 같습니다.
제대로 된 주소, 혹은 주소의 일부를 입력하시면
해당 부분으로 지도가 이동할 것입니다.^^

원본이 삭제될 경우 지원되지 않을 수 있습니다.

<iframe src=//hyunsik.me/web_api/daum/map/test.php?width=600&height=500  frameborder=0 width=610  height=650  align=middle></iframe>

혹시 필요하신 분은 위의 iframe 태그를 복사하셔서 붙여넣기 하시면
iframe이 들어갈 수 없는 게시판이나 카페, 블로그를 제외한 나머지 곳에서는
자유롭게 사용하실 수 있습니다.

혹시 사용하셨는데 수정사항이나 질문 있으시면 아래에 남겨주시고요. ^^;

날라간 글을 다시 쓰는 것이 쉬운 일은 아니네요. ^^;
delete문 함방 쏘고… 제 정신이 아니었습니다. ㅎㅎ

아무튼 복구되서 다행이네요.
좋은 하루 되시고요.
관심 있으신 분들은 여러가지 API를 활용하여 재미있는 것들을 만들어보는 시간
가져보시기 바랍니다.^^


HS LOG List of IT ISSUE

Copyright © HS LOG
Published on December 13, 2009 Filed under: Computer, IT issue, Programming; Tagged as: , , , , , , , , ,

13 Comments
  1. 답변까지 남겨주실 줄은 상상도 못했습니다. ^^;
    감사합니다. ㅎㅎㅎ

  2. Open API 막 입문했습니다.
    파싱하는 부분을 보니 별도의 php파일로 작성하셨는데
    혹시 참고할 수 있을지 문의드려봅니다.
    좋은 하루 되시구요 ^^

  3. 아래와 같이 작성하였습니다.
    약간의 조작을 했는데, 당시에 필요하다고 판단한 부분인 것 같네요.

    방문에 감사드립니다.
    자주 와주세요.^^

    <?
    header("Content-type: text/xml; charset=UTF-8");
    header("Last-Modified: ".gmdate("D, d M Y H:i:s") . " GMT");
    header("Cache-Control: no-store, no-cache, must-revalidate");
    header("Cache-Control: post-check=0, pre-check=0", false);
    header("Pragma: no-cache");
    $query = $_GET[query];
    $query = urlencode($query);

    $cate = $_GET[cate];
    $key = $_GET[key];
    $url = "apis.daum.net";
    $fp = fsockopen($url, 80, $errno, $errstr, 60);
    fputs($fp, "GET /maps/addr2coord?");
    fputs($fp, "q=$query&apikey=1f02f5842f7591129b023b8d158a6c4524f2bbfb");
    fputs($fp, " XML\r\n");
    fputs($fp, "Host: apis.daum.net\r\n");
    fputs($fp, "Connection: Close\r\n\r\n");
    $result = stream_get_contents($fp);
    $result = explode("<?xml", $result);
    $n_result = explode("”, $result[1]);
    $real_result = $n_result[0];

    echo “<?xml ";
    echo $real_result;
    echo "”;
    ?>

  4. 답변 정말 감사합니다.
    블로그 쭉 읽어봤는데 Open API 의 대가이신듯 해요.
    자주 찾아와서 조언 구하겠습니다. ^^
    좋은 밤 되시구요~

  5. Open API에는 대가 없습니다. ^^;
    사실 RSS 라는 일정 규칙에 맞춰진 XML을 파싱하는 부분과
    AJAX 관련 부분만 알면 어떤 Open API이든 쉽게 이용할 수 있습니다.

    암튼 받을 수 없는 칭찬이지만 큰 힘이 되네요.
    감사합니다.

  6. 안녕하세요. 또 찾아뵙네요 ^^
    질문이 있어서 조언을 좀 구하려고요 ^^

    Daum Open API를 이용, 주소에 대한 좌표값을 변수에 저장후
    h_daum_map_search()함수의 끝에서 이 값을 return 해주려고 했는데요.
    문제는 쿼리가 종료될때까지 함수가 pending되는게 아니라 쿼리는 쿼리대로
    날리고 함수는 진행이 되어 좌표값을 받기도 전에 함수가 종료되더군요.
    그래서 함수 종료시의 return값에는 아무 값도 안 들어가고요.

    이를 해결할 수 있는 방법이 없을까 해서 고수님께 여쭙니다 ^^
    그럼 좋은 밤 되시구요

  7. 죄송합니다만 질문을 정확히 이해할 수가 없습니다. ^^;;;;

    내용을 보아하니 대체적으로 자바스크립트의 비동기적인 움직임을
    동기식으로 바꾸고 싶어하시는 것 같다고 예측이 되는데요.

    AJAX를 동기방식으로 사용할 수 있습니다.

    xmlhttp.open을 사용할 때
    h_daum_map_xmlHttp.open(‘GET’, url, true);
    부분을
    h_daum_map_xmlHttp.open(‘GET’, url, false);
    으로 바꾸어 사용하시면 해결 될 수 있을 것 같습니다.

    비동기식 자바스크립트의 경우
    파이어폭스에서는 onreadystatechange 를 사용할 수 없습니다.

    이 부분에 유의하여 코드 작성을 하시면 될 것 같습니다.

    도움이 되셨으면 좋겠습니다.
    감사합니다.

  8. 답변 감사합니다. 제가 딱 원하는 답변이네요.
    한 가지 더 여쭙고 싶은게 있는데요.
    별도의 php 파일을 작성해서 쿼리를 날려주시는데 이를
    자바스크립트 소스에 포함시키지 않는 특별한 이유가 있으신지요?
    제가 웹프로그래밍 쪽으론 초보라서요. ^^;

  9. 자바스크립트에는 크로스 도메인 정책이 있기 때문입니다.
    생각해보니 처음 몇 번 시도하고, 그만했던 것 같은데…
    요즘에는 극복 가능 기술들이 다양하게 존재할 것으로 예상됩니다.

    참고로 그리고 위에 RSS를 긁어오는 코드는 fopen 이 막혀있는 서버에서도
    사용이 가능하게 하기 위해 만든 코드입니다.

    실질적으로 fopen이 막혀있는 곳에서 테스트를 못해보았네요.^^
    아무튼 fopen을 사용하시면 더욱 수월하게 코드를 작성하실 수 있습니다.

    감사합니다.

  10. 아 정말 감사합니다 ^^
    제가 원하는 부분을 콕콕 집어 설명해주시네요
    정말 감사드리고 하시는 일 모두 잘 되시길 바랄게요 ^^

  11. 제가 감사합니다. ^^

    제가 쓴 허접한 글에도
    질문이 달렸다는 것은 감사한 일입니다.

    좋은 시간 되세요~

  12. 안녕하세요. 오랜만입니다 ^^
    그동안 도움 많이 받았는데 하나 더 여쭤도 될까요
    위에서 보여주신 php 코드를 테스트삼아 그대로 사용을 해봤습니다.
    다음지도API에서 localhost로 인증키 받아서 동일 폴더에 API포함된 html소스와
    상기의 php소스를 같이 두었습니다.

    물론 html소스에서
    var strResponseURL = ‘addr-coor.php’;
    이런 식으로 현재 html소스가 있는 폴더에 같이 위치한 php파일을
    지정해주었는데 읽어들이질 못하고 있습니다.

    이런저런 자료를 읽어봤지만 뭐가 문제인지 알수가 없네요.
    분명히 같은 도메인에 두었는데 이해할 수가 없어 또 찾게 되었습니다.
    그럼 좋은 하루 되세요 ^^

  13. 정확히 확인할 수가 없네요.
    다음의 주소 – 좌표 API가 제 블로그에 대해서도 비정상적인 작동을 하고 있는데요.

    아무래도 다음 API의 방식이 변했다던가..
    현재 상태가 안좋다던가 하는 문제가 있는 것 같습니다.

    혹 다음API 자체의 문제 때문이 아니라면
    추측. localhost로 인증키를 받은게 문제 일 수 있을 것 같습니다.

    제 블로그의 테스트도 에러를 일으키는 상황이라
    확정적인 답변을 못드리겠습니다.

    감사합니다.

Thank you for visiting. If you leave a comment, I will not forget.

HS LOG List of IT ISSUE

 
The number of visitors for this post is 1,453 (measured by Jetpack).