Story/api/연동

네이버 지도 JS api v2 종료 안내 [2017년 12월 11일]

Stdio 2017. 10. 19. 10:05
반응형

네이버 지도 api 종료에 따른 공지가 네이버에 올라왔네요.

 

 

네이버 지도 JS api v2 종료 안내 [2017년 12월 11일]

 


네이버 개발자센터 운영진입니다.

보다 나은 지도API를 제공하기 위해 최신 버전 지도API (현재 최신 지도 JS API 버전은 v3)품질 개선에 집중하고자 이며, 기존 버전인 지도 JS API v2는 오는 2017년 12월 11일(월)에  종료할 예정입니다.

지도 웹 API 사용하시는 분 들 중, 최신 API가 아닌 지도 JS API v2를 사용하고 계시다면 오는 2017년 12월 11일(월) 전에 마이그레이션 부탁드립니다.

이에 따른 마이그레이션 가이드를 아래와 같이 안내드립니다.

1. 지도API v2 사용자 종료 일정
   : 2017년 12월 11일(월) 14:00 

2. 대상: 지도API v2 사용자
   (1) 확인 방법: API 호출 URL에 아래와 같이 v2가 포함된 URL을 호출하여 지도 API를 사용하고 계신 개발자들 
   (2) v2 사용자 예시
      -  v2 사용자 : http://openapi.map.naver.com/openapi/v2/maps.js?clientId=YOUR_CLIENT_ID
   (3) 참고: v3 사용자는 아래와 같으며 마이그레이션 대상이 아닙니다. 
      - v3 사용자: http://openapi.map.naver.com/openapi/v3/maps.js?clientId=YOUR_CLIENT_ID

3. 마이그레이션 방법
    (1) 호출 URL을 v2에서 v3로 변경
      -  v2: http://openapi.map.naver.com/openapi/v2/maps.js?clientId=YOUR_CLIENT_ID
       - v3: http://openapi.map.naver.com/openapi/v3/maps.js?clientId=YOUR_CLIENT_ID
    (2)  내부 메서드 변경
   
4. FAQ
   (1) 제가 지도 v2 API 를 사용하고 있는지는 어디서 확인 가능한가요?
       - 귀사의 웹사이트 소스보기에서 maps.js 를 호출하는 부분의 url이 http://openapi.map.naver.com/openapi/v2/maps.js?clientId=YOUR_CLIENT_ID 로 되어 있으면 해당됩니다.
   (2) 제휴사용자일 경우 v3로 변경시 다시 제휴요청을 해야하나요?
       - 제휴 신청을 다시하실 필요는 없습니다. 

감사합니다.

네이버 개발자센터 운영진 드림 

 

 

 

 

 

마이그레이션: 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 v3 설명
nhn.api.map.Map naver.maps.Map 지도 클래스
nhn.api.map.Size naver.maps.Size Size 클래스
nhn.api.map.LatLng naver.maps.LatLng 경/위도 좌표 클래스
nhn.api.map.TM128 naver.maps.Point Point 좌표 클래스 (TM128 투영 사용 시)
nhn.api.map.UTMK naver.maps.Point Point 좌표 클래스 (UTMK 투영 사용 시)
nhn.api.map.Icon 없음
nhn.api.map.SpriteIcon 없음
nhn.api.map.Map.attach/detach naver.maps.Event 이벤트 추가/삭제 객체
nhn.api.map.Marker naver.maps.Marker 마커 오버레이 클래스
nhn.api.map.SpriteMarker naver.maps.Marker 마커 오버레이 클래스 (icon 옵션의 size와 origin 설정)
nhn.api.map.DraggableMarker naver.maps.Marker 마커 오버레이 클래스 (draggable 옵션 사용)
nhn.api.map.GroupOverlay 없음 사용자 구현
nhn.api.map.MarkerLabel 없음 사용자 구현
nhn.api.map.InfoWindow naver.maps.InfoWindow 정보 창 클래스
nhn.api.map.Polyline naver.maps.Polyline 폴리라인 오버레이 클래스
nhn.api.map.Polygon naver.maps.Polygon 폴리곤 오버레이 클래스
nhn.api.map.MultiPolygon naver.maps.Polygon 다중 폴리곤 오버레이 클래스 (다중 path 설정)
nhn.api.map.Circle naver.maps.Circle 원 오버레이 클래스
없음 naver.maps.Rectangle 사각형 오버레이 클래스
nhn.api.map.ZoomControl naver.maps.ZoomControl 지도 확대/축소 컨트롤
nhn.api.map.MapTypeBtn naver.maps.MapTypeControl 지도 유형 컨트롤
nhn.api.map.TrafficMapBtn 없음
nhn.api.map.ThemeMapBtn 없음
nhn.api.map.TrafficGuide 없음
nhn.api.map.BicycleGuide 없음
nhn.api.map.CustomControl naver.maps.CustomControl 사용자 컨트롤 구현을 위한 추상 클래스

전환 방법

지도 초기화하기

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);
출처 : https://developers.naver.com/notice/article/10000000000030654987
반응형
저작자표시 비영리 변경금지