Daum DNA : 오픈API > DevDocs > 지도API v3 시작하기

시작하며

Daum 지도 API v3는 Desktop 환경 뿐만 아니라 Mobile 환경에서도 지도를 이용할 수 있도록 경량화하였으며, API 사용자가 자유롭게 기능을 확장하여 이용할 수 있도록 설계되었습니다.

Daum 지도 API v3는 기존 처럼 지도 API 이용약관에 의거하여 무료로 사용하실 수 있으며, 먼저 오픈 API 지도 등록이 필요합니다. 지금 당장 여러분의 웹 사이트에 Daum 지도 API v3를 사용해보세요. ^^

이 내용은 Daum 지도 API v3에 대한 내용을 담고 있습니다. 이전 API에 대해서는 Daum 지도 API 소개를 보세요.

Daum 지도 API v3는 단순한 v2의 업그레이드 버전이 아닙니다. API를 완전히 새롭게 다듬어 용량을 줄이고 속도를 개선하였으며, 별도의 작업 없이 같은 코드로 데스크톱과 모바일웹 환경을 지원할 수 있도록 설계되었습니다.

먼저 Daum 지도 API v3가 지원하는 기능에 대해 간단히 살펴보고, 웹사이트에 지도를 넣는 방법과 나아가 다양한 기능에 대해 살펴보겠습니다.

Daum 지도 API v3의 사양

지도 종류

일반지도
스카이뷰

좌표계

WGS84

브라우저 지원

Internet Explorer 6+
Mozilla Firefox 3+
Apple Safari 5+
Google Chrome 5+
Opera 10+

모바일 기기 지원

Apple iPhone/iPod
Google Android

Hello, World!

코드를 소개하는 데 있어서 Hello World가 빠질 수는 없을 것입니다. 아래는 Daum 지도 API v3로 구현한 Hello World입니다.

아래 코드는 바로 작동하지 않습니다. apikey를 환경에 맞게 변경해주셔야하며, 자세한 내용은 아래에서 설명하고 있습니다.

<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { width: 100%; height: 100% }
</style>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=DAUM_MAPS_DEMO_APIKEY"></script>
<script type="text/javascript">
window.onload = function() {
  var position = new daum.maps.LatLng(37.537123, 127.005523);
  var map = new daum.maps.Map(document.getElementById('map'), {
    center: position,
    level: 4,
    mapTypeId: daum.maps.MapTypeId.HYBRID
  });
  var marker = new daum.maps.Marker({
    position: position
  });
  marker.setMap(map);
  var infowindow = new daum.maps.InfoWindow({
    content: 'Hello, World!'
  });
  infowindow.open(map, marker);
};
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

이 코드를 실행하면 다음커뮤니케이션이 여러분을 맞이할 것입니다.
그럼 코드를 처음부터 하나하나 살펴보겠습니다.

HTML과 CSS

32번째 줄을 보시면 지도가 위치할 엘리먼트를 배치하고 있습니다.

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

그리고 그 엘리먼트의 레이아웃을 5번째 줄에서 정의하고 있습니다.

<meta name="viewport" content="initial-scale=1.0,user-scalable=no">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { width: 100%; height: 100% }
</style>

이어서 <div>가 웹페이지의 전체를 차지하도록 크기를 설정하고 있습니다.

API를 넣어보자

다섯 번째 줄에서는 Daum 지도 API v3를 사용하기 위해서 API 라이브러리를 불러오고 있습니다.

<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=DAUM_MAPS_DEMO_APIKEY"></script>

주의하셔야 할 부분은 API 주소에 포함된 key입니다. apikey 뒤에 나오는 DAUM_MAPS_DEMO_APIKEY 부분은 사용자 여러분께서 지도 API 등록하기를 통해서 미리 받으신 값으로 채워주셔야 합니다.

daum.maps 네임스페이스

Daum 지도 API v3는 이전 버전 API와는 달리 고유의 네임스페이스를 가집니다.

daum.maps.Map
daum.maps.LatLng
daum.maps.MapTypeId
daum.maps.InfoWindow
...

지도의 좌표

14번째 줄에서 먼저 우리가 앞으로 사용할 좌표 하나를 만듭니다.

  var position = new daum.maps.LatLng(37.537123, 127.005523);

Daum 지도 API v3에서는 특정 좌표를 표현하기 위해 LatLng를 사용하며, 인자로는 각각 WGS84 좌표계 기준 위도 경도 값입니다.
위의 코드는 다음커뮤니케이션 한남 건물이 위치하고 있는 위도 (북위)37°32'13" (=37.537123), 경도 (동경)127°0'20" (=127.005523)를 나타냅니다.

Map 객체

지도를 생성하기 위해 가장 먼저 해야 할 일은 daum.maps.Map 객체를 생성하는 일입니다.

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

첫 번째 인자로는 지도가 위치할 엘리먼트를 지정합니다. Daum 지도 API v3는 해당 엘리먼트를 이용하여 지도를 생성하며, 지도의 크기는 엘리먼트의 크기를 따르게 됩니다.

두 번째 인자로는 보여줄 위치와 확대 수준, 지도 종류를 설정합니다.

center의 값으로 지정한 좌표가 보여줄 지도의 중심이 됩니다.:
여기서는 방금 만들어 둔 다음커뮤니케이션 건물 좌표 값을 사용하고 있습니다.

level 값으로는 확대 수준을 결정합니다.
0부터 14까지의 값이며, 숫자가 작을 수록 확대됩니다.
단, 이 값의 범위는 다음에 이야기할 지도 종류에 따라 다릅니다.

mapTypeId의 값으로는 지도 종류를 결정합니다.
위에서 지정한 MapTypeId.HYBRID는 스카이뷰 사진에 다양한 기호를 얹은 지도입니다.
일반지도는 MapTypeId.ROADMAP으로 볼 수 있습니다.

마커

지도가 만들어졌으므로 이제 다음커뮤니케이션 건물의 위치를 표시하려 합니다. 이 때 사용할 수 있는 것이 마커입니다.
아래는 19번째 줄부터 등장하는 코드입니다.

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

건물의 좌표를 마커가 위치할 좌표로 지정하였습니다.
마커는 생성과 함께 지도에 연결되지 않습니다. setMap 메소드로 연결하려는 지도를 지정해야 비로소 지도에 마커가 표시됩니다.

인포윈도우

이제 마커 위에 말풍선을 보여주려고 합니다. 이런 말풍선을 Daum 지도 API에서는 인포윈도우라고 부릅니다.

  var infowindow = new daum.maps.InfoWindow({
    content: 'Hello, World!'
  });
  infowindow.open(map, marker);

내용은 "Hello, World!"로 하여 새 인포윈도우를 생성합니다.

마커와 마찬가지로 인포윈도우도 지도에 연결하는 작업을 거쳐야 합니다.
이 인포윈도우를 방금 만든 마커에 위치를 맞추어 보여주기 위해 open 메소드로 지도 객체와 함께 마커 객체를 함께 넘겨줍니다.

이제 마커 위에 "Hello, World!" 인포윈도우가 등장하게 됩니다.

예제

Daum 지도 API에는 위에서 소개한 것 외에도 다양한 기능이 있습니다. 그에 대한 예제는 아래 링크를 참조해주세요.

기본

응용

로드뷰

모바일

팁 모음

Daum 지도 API v2로부터 이주하기

Daum 지도 API v3는 완전히 새로 작성된 API로 v2와는 매우 다릅니다. v2에 익숙하신 분들을 위해 v2의 각 기능이 v3와 어떻게 대응하는지 정리해 드립니다.

v2	v3
DMap	daum.maps.Map
DMark	daum.maps.Marker
DIcon	daum.maps.MarkerImage
DInfoWindow	daum.maps.InfoWindow
DPolyline	daum.maps.Polyline
DPolygon	daum.maps.Polygon
DCircle	daum.maps.Circle
DLatLng	daum.maps.LatLng
DPoint	daum.maps.Point
DSize	daum.maps.Size
DEvent	daum.maps.event
DRoadview	daum.maps.Roadview
DRoadviewClient	daum.maps.RoadviewClient

TM이나 Congnamul 좌표계는 어떻게 쓸 수 있나요?

v2에서는 지도의 기본 좌표계를 변경하여 사용할 수 있었지만 v3에서는 오직 WGS84 좌표만 사용하실 수 있습니다. 따라서, 좌표계 변환 API를 통해 먼저 좌표를 WGS84 좌표계로 변환하시어 이용해 주시기 바랍니다.

v2와 v3를 섞어 쓸 수 있나요?

아니요, 서로 네임스페이스가 다르고 코드 베이스도 완전히 다르기 때문에 불가능합니다.

v3의 로드뷰는 모바일 기기에서 동작하겠죠?

로드뷰는 아직 모바일 기기에서 동작하지 않습니다만, 준비 중에 있으니 기대해주세요.

Map의 setMode가 사라졌어요!

네, v2에 있던 setMode 기능은 v3에서는 제거되었습니다. 동등한 기능을 제공하는 추가 라이브러리를 준비 중입니다.

DDownloadUrl이 없어졌어요!

v2에 있던 DDownloadUrl은 그 기능이 너무 단순하고 허점이 많아 제거되었습니다. 아래 나열한 오픈소스 라이브러리를 사용하시기를 권해드립니다.

사용자 오버레이

이 내용은 숙련자를 대상으로 합니다.

기본으로 제공되는 마커와 인포윈도우 만으로는 여러분이 가진 정보를 표현하기에 불충분 할 수 있습니다. 이런 경우를 위해 사용자 오버레이 기능을 제공하고 있습니다.

아래는 간단히 텍스트를 지도 위에 출력하는 코드입니다.

function SimpleTextMarker(position, text) {
    this.position_ = position;
    this.node_ = document.createElement('div');
    this.node_.appendChild(document.createTextNode(text));
}

SimpleTextMarker.prototype = new daum.maps.AbstractOverlay;

SimpleTextMarker.prototype.onAdd = function() {
    var panel = this.getPanels().overlayLayer;
    panel.appendChild(this.node_);
};

SimpleTextMarker.prototype.onRemove = function() {
    this.node_.parentNode.removeChild(this.node_);
};

SimpleTextMarker.prototype.draw = function() {
    var projection = this.getProjection();
    var point = projection.pointFromCoords(this.position_);
    var width = this.node_.offsetWidth;
    var height = this.node_.offsetHeight;
    this.node_.style.cssText = 'position: absolute; white-space: nowrap; left: ' +
            (point.x - width / 2) + 'px; top: ' +
            (point.y - height / 2) + 'px';
};

var marker = new SimpleTextMarker(map.getCenter(), 'You just activated my trap card!');
marker.setMap(map);

위의 코드를 실행하면 지도 중앙에 해당하는 곳에 텍스트가 중앙 정렬로 위치하게 됩니다.

사용자 오버레이는 다음과 같은 규칙을 따릅니다.

사용자 오버레이는 반드시 daum.maps.AbstractOverlay를 상속받아야 합니다.
setMap을 통해 지도에 연결되면 onAdd 메소드가 호출되며, 일반적으로 여기서 필요한 엘리먼트를 추가합니다.
setMap을 통해 지도에서 제거되면 onRemove 메소드가 호출되며, 여기서 onAdd에서 연결했던 엘리먼트를 제거합니다.
위치를 재조정해야 할 필요가 있을 때는 draw 가 호출됩니다. 이 안에서 엘리먼트의 위치를 변경합니다.

위의 작업을 할 수 있도록 AbstractOverlay는 두 가지 메소드를 제공합니다.

getPanels()는 지도에 엘리먼트를 추가할 수 있는 부모 엘리먼트 overlayLayer를 제공합니다.
getProjection()은 좌표를 화면(CSS)좌표로 변환할 수 있는 pointFromCoords(latLng) 메소드를 제공합니다.

이제 AbstractOverlay를 이용하여 지도를 다양하게 꾸미실 수 있을 것입니다.

이용 사례

좋은 사례를 갤러리에 올려주시면, 검토 후 추가하겠습니다.

DNA

목차

검색

오픈API

목차