마이그레이션: v2에서 v3로 전환하기

이 문서는 NAVER 지도 API v2에서 v3으로 전환하는 사용자를 위해 NAVER 지도 API v2의 주요 인터페이스 중 v3에서 변경된 내용을 중심으로 설명합니다.

주요 변경 내용

줌 레벨 지원 범위

• v2: 1~14 레벨을 지원하고 있으며, 14 레벨이 최대 확대 레벨입니다.
• v3: v2와 동일한 줌 레벨 체계를 지원하며, 사용자 지도 유형을 활용하면 줌 레벨 체계를 사용자가 설정해 이용할 수 있습니다.

지도 유형 지원

• v2: 일반, 위성, 겹쳐보기 지도 유형을 지원합니다.
• v3: 일반, 위성, 겹쳐보기 외에 지형도 지도 유형을 지원하며, 사용자 지도 유형 역시 지원합니다.

오버레이, 컨트롤 추가/삭제 방법

• v2: 오버레이, 컨트롤을 추가/삭제할 때 Map 객체의 다음 메서드를 이용합니다.
  • addOverlay
  • removeOveraly
  • addControl
  • removeControl
• v3: setMap 메서드를 이용해 오버레이, 컨트롤을 지도에 추가/삭제합니다.

주요 객체 대체표

NAVER 지도 API v2의 네임스페이스는 nhn.api.map입니다. 그러나 v3의 네임스페이스는 naver.maps이며, 축약해 N 네임스페이스를 사용할 수 있습니다.

전환 방법

지도 초기화하기

v2

var map = new nhn.api.map.Map(mapContainer, {
    size: new nhn.api.map.size(300, 400)
});

v3

var map = new naver.maps.Map('mapContainer', {
    size: new naver.maps.Size(300, 400)
});

지도 이동하기

v2

var cityHall = new nhn.api.map.LatLng(37.5666805, 126.9784147);
map.setCenter(cityHall, 10);

var bounds = map.getBound();
map.setBound(bounds);

map.setCenterBy(15, -30);

v3

var cityHall = new naver.maps.LatLng(37.5666805, 126.9784147);
map.setCenter(cityHall);
map.setZoom(3);

var bounds = map.getBounds();
map.fitBounds(bounds);

map.panBy(new naver.maps.Point(15, -30));

지도 줌 레벨 설정하기

v2

map.setLevelBy(1);
map.setLevelBy(-1);
map.setMinMaxLevel(5, 10);

v3

map.setZoom(map.getZoom() + 1);
map.setZoom(map.getZoom() - 1);
map.setOptions("minZoom", 5);
map.setOptions("maxZoom", 10);

지도 인터랙션 옵션 조정하기

v2

map.enableDragPan(false);
map.enableDragPan(true);
map.enableWheelZoom(false);
map.enableWheelZoom(true);

v3

map.setOptions("draggable", false);
map.setOptions("draggable", true);
map.setOptions("scrollWheel", false);
map.setOptions("scrollWheel", true);

지도 이벤트 제어하기

v2

map.attach('move', onMove);
map.detach('move', onMove);

map.attach('dragstart', onDragStart);
map.detach('dragstart', onDragStart);

map.attach('dragend', onDragEnd);
map.detach('dragend', onDragEnd);

map.attach('click', onClick);
map.detach('click', onClick);

map.attach('dblclick', onDblClick);
map.detach('dblclick', onDblClick);

map.attach('mousemove', onMousemove);
map.detach('mousemove', onMousemove);

map.attach(map, 'zoom', onZoom);
map.detach(map, 'zoom', onZoom);

map.attach('redraw', onRedraw);
map.detach('redraw', onRedraw);

v3

var listeners = [
    naver.maps.Event.addListener(map, 'center_changed', onMove),
    naver.maps.Event.addListener(map, 'bounds_changed', onMove),
    naver.maps.Event.addListener(map, 'drag', onDrag),
    naver.maps.Event.addListener(map, 'dragstart', onDragStart),
    naver.maps.Event.addListener(map, 'dragend', onDragEnd),
    naver.maps.Event.addListener(map, 'click', onClick),
    naver.maps.Event.addListener(map, 'dblclick', onDblClick),
    naver.maps.Event.addListener(map, 'mousemove', onMousemove),
    naver.maps.Event.addListener(map, 'zoom_changed', onZoom),
    naver.maps.Event.addListener(map, 'idle', onRedraw)
];

naver.maps.Event.removeListener(listeners);

마커 추가/삭제하기

v2

var cityHall = new nhn.api.map.LatLng(37.5666805, 126.9784147);
var icon = new nhn.api.map.Icon('http://static.naver.net/maps/v3/pin_default.png',
                    new nhn.api.map.Size(22, 35), new nhn.api.map.Size(11, 35));
var marker = new nhn.api.map.Marker(icon, {
    point: cityHall
});

map.addOverlay(marker);
map.removeOverlay(marker);

v3

var cityHall = new naver.maps.LatLng(37.5666805, 126.9784147);
var markerOptions = {
    position: cityHall,
    icon: {
        url: 'http://static.naver.net/maps/v3/pin_default.png',
        size: new naver.maps.Size(22, 35),
        anchor: new naver.maps.Point(11, 35)
    }
};
var marker = new naver.maps.Marker(markerOptions);

marker.setMap(map); // 추가
marker.setMap(null); // 삭제

정보 창 표시하기

v2

var infoWindow = new nhn.api.map.InfoWindow();
infoWindow.setContent('<div style="background-color:#fff;border:solid 1px #333;padding:5px;">NAVER Maps</div>');
infoWindow.setPoint(cityHall);

map.addOverlay(infoWindow);

infoWindow.setVisible(true);
window.setTimeout(function() {
    infoWindow.setVisible(false);
}, 2000);

v3

var infoWindow = new naver.maps.InfoWindow({
    content: 'NAVER Maps'
});

infoWindow.open(map, cityHall);
window.setTimeout(function() {
    infoWindow.close();
}, 2000);

폴리라인 추가/삭제하기

v2

var points = [
    new nhn.api.map.LatLng(37.5679109, 126.9778991),
    new nhn.api.map.LatLng(37.5677989, 126.9795420),
    new nhn.api.map.LatLng(37.5664412, 126.9798661),
    new nhn.api.map.LatLng(37.5656713, 126.9794012),
    new nhn.api.map.LatLng(37.5657751, 126.9778604),
    new nhn.api.map.LatLng(37.5662818, 126.9770724),
    new nhn.api.map.LatLng(37.5671805, 126.9767998)
];

var polyline = new nhn.api.map.Polyline(points, {
    strokeWidth: 5,
    strokeOpacity: 0.5,
    strokeColor: "#0000ff" 
});

map.addOverlay(polyline);
map.removeOverlay(polyline);

v3

var points = [
    new naver.maps.LatLng(37.5679109, 126.9778991),
    new naver.maps.LatLng(37.5677989, 126.9795420),
    new naver.maps.LatLng(37.5664412, 126.9798661),
    new naver.maps.LatLng(37.5656713, 126.9794012),
    new naver.maps.LatLng(37.5657751, 126.9778604),
    new naver.maps.LatLng(37.5662818, 126.9770724),
    new naver.maps.LatLng(37.5671805, 126.9767998)
];

var polyline = new naver.maps.Polyline({
    path: points,
    strokeWeight: 5,
    strokeColor: "#0000ff",
    strokeOpacity: 0.5
});

polyline.setMap(map); // 추가
polyline.setMap(null); // 삭제

원 추가/삭제하기

v2

var circle = new nhn.api.map.Circle({
    strokeColor: "#00ff00",
    strokeWidth: 10,
    strokeOpacity: 0.5,
    fillColor: "#00ff00",
    fillOpacity: 0.5
});

circle.setCenterPoint(cityHall);
circle.setRadius(100);

map.addOverlay(circle);
map.removeOverlay(circle);

v3

var circle = new naver.maps.Circle({
    center: cityHall,
    radius: 100,
    strokeColor: "#00ff00",
    strokeWeight: 10,
    strokeOpacity: 0.5,
    fillColor: "#00ff00",
    fillOpacity: 0.5
});
circle.setMap(map); // 추가
circle.setMap(null); // 삭제

지도 줌 컨트롤 표시하기

v2

var zoomControl = new nhn.api.map.ZoomControl();

map.addControl(zoomControl);

zoomControl.setPosition({
    top: 10,
    left: 10
});

v3

map.setOptions({
    zoomControl: true,
    zoomControlOptions: {
        position: naver.maps.Position.TOP_LEFT
    }
});

또는

var zoomControl = new naver.maps.ZoomControl({
    position: naver.maps.Position.TOP_LEFT
});

zoomControl.setMap(zoomControl);