네이버 지도 api 예제

네이버맵 v2 와 v3 동시 비교

전체 기초 간단 예제
등록일 :

네이버 지도 JavaScript API v3 출시

네이버 지도 JavaScript API v3가 출시 되었습니다. 그리고 에 v2 버전 지도 서비스가 종료되었습니다.

그래서 기존 v2 버전을 v3 로 바꾸어야 하는가라는 고민(!)이 생겼습니다. 뭐... 새로 만들어야 한다면 v3 로 하는게 좋겠죠. 하지만 (이런건 우리들만의 비밀로 하기로 해요)

지도 출시 공지글에는 v3 버전 특징으로

- PC 웹, 모바일웹에 맞는 지도 화면 제공
- 라이브러리 용량 최적화를 통한 부드럽고 빠른 인터렉션 지원
- 360도 파노라마 뷰 이용 가능
- 다양한 유형의 지도 지원: 지적편집도, 교통상황, 데이터레이어, 마커 및 인포윈도우, 커스텀 타일 등

이라고 합니다.

※ 아래 예제들은 실제 테스트 해볼 수 있는 코드도 포함되어 있습니다.
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

추가된 내용

v2 종료

이제 무조건 v3 버전 지도를 사용하셔야 합니다.
기존 v2는 종료되었습니다. 그래서 이 예제는 의미가 없어졌습니다.

기준 체크해 보니 v2 도 특정한 상태에서는 사용 가능하지만
일단은 강제로 안되게 막혀있습니다.

동시에 비교해 보기

v2 와 v3 지도를 동시에 띄워보았습니다.

map v2
map v3
<!-- http://localhost 에서 테스트 하시려면 cpw9RMOfkmb0qIa7Vz23 키를 사용해 보세요 -->

<!-- 맵 v2 스크립트 -->
<script src="https://openapi.map.naver.com/openapi/v2/maps.js?clientId=v6uq3Nmidx6gdSOddr1A"></script>

<!-- 맵 v3 스크립트 -->
<script src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=v6uq3Nmidx6gdSOddr1A"></script>

CSS

.map_wrap {
	background:#efefef;
	text-align:center;
}
.map_wrap .map_div {
	border-radius:5px;
	border:4px solid gray;
	display:inline-block;
	height:550px;
	margin:3px;
	vertical-align:top;
	width:550px;
}
.map_wrap .map_tit {
	display:inline-block;
	font-size:14pt !important;
	padding:5px 0;
	width:550px;
}

HTML

<div class="map_wrap">
	<div id="map_v2" class="map_div"></div><div id="map_v3" class="map_div"></div>
	<br>
	<div class="map_tit">map v2</div><div class="map_tit">map v3</div>
</div>

자바스크립트

// v2 버전 지도 생성
var map_v2 = new nhn.api.map.Map('map_v2', {
	point : new nhn.api.map.LatLng(37.2900533, 127.1036797),
	zoom : 10
});

var tmp = new nhn.api.map.MapTypeBtn(); // 일반, 위성 버튼 추가하기
tmp.setPosition({top:10, right:10}); // 위치 설정
map_v2.addControl(tmp); // 지도에 추가


// v3 버전 지도 생성
 new naver.maps.Map('map_v3', {
	center : new naver.maps.LatLng(37.2900533, 127.1036797),
	zoom : 10,
	mapTypeControl : true // 일반, 위성 버튼 보이기 (v3 에서 바뀐 방식)
});

v3 에서 지도 옵션 설정하는 방법이 간편해 졌습니다. 굿 !!

실행 가능한 소스

테스트 : v2 버전 크게 보기

지도 확대, 축소, 이동시 성능 테스트
움직임의 부드러움 반응속도등 테스트
map v2
<!-- http://localhost 에서 테스트 하시려면 cpw9RMOfkmb0qIa7Vz23 키를 사용해 보세요 -->

<!-- 맵 v2 스크립트 -->
<script src="https://openapi.map.naver.com/openapi/v2/maps.js?clientId=v6uq3Nmidx6gdSOddr1A"></script>

CSS

.map_wrap {
	text-align:center;
}
.map_wrap .map_div {
	border-radius:5px;
	border:4px solid gray;
	box-sizing:border-box;
	height:800px;
	margin:0 auto;
	width:95%;
}
.map_wrap .map_tit {
	font-size:12pt !important;
	padding:10px 0;
}

HTML

<div class="map_wrap">
	<div id="map_v2" class="map_div"></div>
	<div class="map_tit">map v2</div>
</div>

자바스크립트

// v2 버전 지도 생성
var map_v2 = new nhn.api.map.Map('map_v2', {
	point : new nhn.api.map.LatLng(37.2900533, 127.1036797),
	zoom : 10
});

var tmp = new nhn.api.map.MapTypeBtn();
tmp.setPosition({top:10, right:10}); // 위치 설정
map_v2.addControl(tmp); // 지도에 추가

실행 가능한 소스

테스트 : v3 버전 크게 보기

지도 확대, 축소, 이동시 성능 테스트
움직임의 부드러움 반응속도등 테스트
map v3
<!-- http://localhost 에서 테스트 하시려면 cpw9RMOfkmb0qIa7Vz23 키를 사용해 보세요 -->

<!-- 맵 v3 스크립트 -->
<script src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=Lnvz0W4xgiEe6Ee_Ejcx"></script>

CSS

.map_wrap {
	text-align:center;
}
.map_wrap .map_div {
	border-radius:5px;
	border:4px solid gray;
	box-sizing:border-box;
	height:800px;
	margin:0 auto;
	width:95%;
}
.map_wrap .map_tit {
	font-size:12pt !important;
	padding:10px 0;
}

HTML

<div class="map_wrap">
	<div id="map_v3" class="map_div"></div>
	<div class="map_tit">map v3</div>
</div>

자바스크립트

// v3 버전 지도 생성
var map_v3 = new naver.maps.Map('map_v3', {
	center : new naver.maps.LatLng(37.2900533, 127.1036797),
	zoom : 10,
	mapTypeControl : true // 일반, 위성 버튼 보이기 (v3 에서 바뀐 방식)
});

실행 가능한 소스

방문해 주셔서 감사드립니다 !!