다음 지도 API 사용하기 (지도연동)

다음지도, 네이버지도, 구글지도 등 포털사이트의 지도를 통해서 우리가 원하는 장소를 쉽게 찾을 수 있습니다. 그리고 요즘 이러한 것을 모르는 이는 거의 없겠죠?

 

그 때문일까요? 고객의 요구사항 중에서 자신의 홈페이지에 "오시는 길" 등의 페이지에 위의 지도 서비스를 연동해서 보여주길 원하는 사람이 많이 늘었습니다.

 

직접 디자인한 약도 이미지를 넣을 수 있겠지만 사용자로 하여금 정확한 주소를 안내하는 것은 포털 사이트가 제공해주는 지도 서비스만큼 좋은 것이 없다고 생각합니다. 

 

여기서는 다음 지도 API를 활용하여 사이트내 다음 지도를 삽입하는 방법을 안내하겠습니다.

 

※ 실은 제가 안내하는 것 보다는 개발자 사이트에 들어가서 다음에서 제공하는 문서를 직접 보시는 것이 더 좋습니다. 여기서는 좀더 간단하고 쉽게 설명하겠습니다. 자세한 내용은 아래 사이트를 참고바랍니다.

 

참고사이트 : http://dna.daum.net/apis/maps/intro

 

다음 지도 API를 사용하기 위해서는 아래와 같은 절차가 필요합니다.

 

1. API Key 발급하기

2. js 파일 링크

3. HTML, CSS, JavaScript 소스코드 작성

 

절차는 정말 단순합니다. 다음에서 개발자가 쉽게 연동할 수 있도록 배려를 많이 한 것이 느껴집니다.

 

 

[1번 API Key 발급하기]

 

 

http://dna.daum.net/apis/maps/intro 페이지의 하단을 보시면 위 캡처한 화면을 보실 수 있습니다. 위의 화면에서 빨간색으로 표시된 부분의 링크를 찾아서 클릭하시면 아래와 같은 화면을 보실 수 있습니다.

 

 

 

 

위 화면을 보시면 "사용 웹 사이트" 라는 항목이 있습니다. 다음 주소 API를 사용할 홈페이지의 URL 주소를 기입하시고 이용약관 내용을 읽어보신 후 약관동의, "API 키 등록하기" 버튼을 클릭하시면 아래와 같은 화면을 보실 수 있습니다.

 

 

위 화면을 보시면 apikey 라는 항목이 있습니다. 이 apikey가 있어야만 다음 지도 API를 사용하실 수 있습니다.

 

 

 

 

[2번 js 파일 링크]

 

다음은 js 파일을 링크하는 단계입니다. 지도를 삽입하고자 하는 페이지의 상단에 아래와 같은 소스코드를 추가합니다.

 

<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=발급받은API_KEY값"></script>

 

이 때 중요한 사항은 빨간색으로 굵게 표시한 부분을 위의 1번 단계에서 발급받은 apikey값을 넣어야 한다는 것입니다.

 

 

 

 

[3번 HTML, CSS, JavaScript 소스코드 작성]

 

지도를 삽입하고자 하는 페이지에서 지도가 표시될 부분을 div로 표시합니다.

 

예) <div id="map"></div>

 

위 div에 다음 지도가 삽입되어 보여질 것입니다.

그 다음 방금 추가한 div에 css를 지정하여 내가 원하는 크기로 다음 지도가 보여지도록 합니다.

 

<style type="text/css">
#map { width: 100%; height: 100%;}
</style>

 

마지막으로 가장 중요한 부분인데요, 결론부터 말씀드리면 아래 함수를 가져다 쓰시면 됩니다.

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

//lng : 위도, lat : 경도
function setMap(lng, lat)
{
          var position = new daum.maps.LatLng(lng, lat);
          var zoomControl = new daum.maps.ZoomControl();
          var mapTypeControl = new daum.maps.MapTypeControl();

         

          //다음 지도를 생성합니다.

          var map = new daum.maps.Map(document.getElementById('map'), {
                    center: position,
                    level: 4,
                    //mapTypeId: daum.maps.MapTypeId.HYBRID
                    mapTypeId: daum.maps.MapTypeId.ROADMAP
          });

 

          //마커, 지도 위에 아이콘을 표시한다.

          var marker = new daum.maps.Marker({
                    position: position
          });

 

          //말풍선, 지도 위에 말풍선을 표시한다. (자신이 위치한 빌딩명이나 업체명을 넣으면 좋겠죠?)

          var infowindow = new daum.maps.InfoWindow({
                    content: '<p style="margin:7px 7px 7px 7px;font:12px/1.5 sans-serif"><strong>여기로 찾아오시면되요!</strong></p>'
          });

 

          //각종 컨트롤러를 지도에 붙입니다. 확대축소, 지도타입 전환하기 위한 버튼 등이 여기에 해당합니다.

          map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
          map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);

 

          //마커 및 말풍선을 지도에 붙입니다.
          marker.setMap(map);
          infowindow.open(map, marker);

}

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

 

 

위 함수의 소스코드 중에서

 

var map = new daum.maps.Map(document.getElementById('map'), { ...

 

이 부분의 소스코드를 보시면 보라색으로 표시된 'map' 이라는 부분은 div의 id값을 가르킵니다. 즉 지도를 생성할 때 어디에 보여질지 결정하는 부분이라고 보시면 되겠습니다.

 

위 함수는 위도와 경도를 받도록 되어있습니다. ㅇㅅㅇ 저도 순간 난감했는데요, 다음에서는 지도 API에서 "주소->좌표 변환" 할 수 있도록 기능을 지원하고 있습니다. 아래 URL 주소에 들어가시면 "주소->좌표 변환"에 대한 안내를 받아보실 수 있습니다.

 

참고사이트 : http://dna.daum.net/apis/local/ref#addr2coord

 

 

하지만 저의 경우엔 아래 사이트를 이용하여 주소를 직접 찾아 위도와 경도값을 구해서 사용했습니다. (주소->좌표 변환 서비스를 사용하면 좋을텐데 저는 무슨 이유에서인지 계속 실패했습니다.)

 

참고사이트 : http://jyhkorea.com.ne.kr/

 

위 주소에 들어가셔서 원하는 장소를 찾으신 후 마우스를 화면에 클릭하시어 위도와 경도를 구하실 수 있습니다. 노가다이고 비효율적인 방법이지만 저처럼 주소->좌표변환 서비스 이용이 안되시는 분은 위 참고사이트를 이용하시면 되겠습니다.

 

 

그리고 혹시라도 주소->좌표변환 서비스에 대해서 사용방법을 아시는 분은 댓글로 간단하게라도 알려주시면 감사하겠습니다!