네이버 지도를 달아보자

지도 생성시 속성 알아보기

전체 기초 기능별 예제 예제 모음
등록일 :

!! 네이버 지도 v2 버전 종료 안내 !!

에 v2 버전 지도 서비스가 종료되었습니다.
이제 v3 버전을 써야할 때가 되었습니다.
기존 서비스를 이렇게 종료할때가 제일 부들부들한 경우인데요 ...

v2 와 v3 는 지도 사용 방법이 다릅니다. v3 버전이 확실히 개선된 방법입니다.

※ 현재 예제는 v2 버전입니다. v3 버전도 곧 준비해 보겠습니다. v2 버전 예제도 다 못했는데요 ..^^;
혹시 이 글을 처음 보신다면
아래 링크를 참고해 보시면 좋습니다. ^^*

참고 : 예제는 기준의 내용입니다.

아무런 설정없는 지도생성


<script src="https://openapi.map.naver.com/openapi/v2/maps.js?clientId=v6uq3Nmidx6gdSOddr1A"></script>
<!-- clientId 값을 발급받은 키로 변경하세요 -->
<div id="nmap" style="width:800px; height:500px;"></div>

<script type="text/javascript">
	new nhn.api.map.Map('nmap'); // nmap 은 지도가 생성될 요소의 id값 입니다
</script>

실행 가능한 소스

그럼 설정 기본값을 알아보겠습니다.

위치 - 지도 위치 기본값 입니다. 서울시청 부근이군요. 값은 위도, 경도
point : new nhn.api.map.LatLng(37.5675455, 126.9773352)

줌 - 지도 확대, 축소 수치입니다. 1 ~ 14 까지인데 기본값은 12 군요.
zoom : 12

마우스 휠로 지도 줌 가능 여부 - 안되게 하려면 false 를 사용하면 되겠습니다.
enableWheelZoom : true

지도 이동하기 - 지도를 드래그하여 이동 시키는 기능입니다.
enableDragPan : true

더블 클릭시 확대하기
enableDblClickZoom : false

지도 모드 - 0:일반지도, 1:위성지도(지명 도로등 보임), 2:위성지도(풍경만)
mapMode : 0

교통상황 보이기
activateTrafficMap : false

자전거도로 보이기
activateBicycleMap : false

줌 가능 영역 - 기본값 1 ~ 14 까지 가능, 전체 수치
minMaxLevel : [ 1, 14 ]

네이버 개발자 센터의 코드 설명

자바스크립트

nhn.api.map.Map(map : String, {
	point : Coord // 지도 중심점의 좌표
	zoom : Number // 지도의 축척 레벨
	boundary : Array // 지도 생성 시 주어진 array에 있는 점이 모두 보일 수 있도록 지도를 초기화한다.
	boundaryOffset : Number // boundary로 지도를 초기화 할 때 지도 전체에서 제외되는 영역의 크기.
	enableWheelZoom : Boolean // 마우스 휠 동작으로 지도를 확대/축소할지 여부
	enableDragPan : Boolean // 마우스로 끌어서 지도를 이동할지 여부
	enableDblClickZoom : Boolean // 더블클릭으로 지도를 확대할지 여부
	mapMode : Number // 지도 모드(0 : 일반 지도, 1 : 겹침 지도, 2 : 위성 지도)
	activateTrafficMap : Boolean // 실시간 교통 활성화 여부
	activateBicycleMap : Boolean // 자전거 지도 활성화 여부
	minMaxLevel : Array // 지도의 최소/최대 축척 레벨
	size : Size // 지도의 크기
	detectCoveredMarker : Boolean // 겹쳐 있는 마커를 클릭했을 때 겹친 마커 목록 표시 여부
})

기본 설정과 다르게 적용해 보기

- 아래 지도는 확대, 축소, 이동이 안됩니다.
- 더블 클릭하면 확대 할 수 있습니다.
- 교통 상황과 자전거 도로 표시.
- 위성사진 모드로 설정.

<script src="http://openapi.map.naver.com/openapi/v2/maps.js?clientId=v6uq3Nmidx6gdSOddr1A"></script>
<!-- clientId 값을 발급받은 키로 변경하세요 -->
<div id="nmap" style="width:100px; height:100px;"></div>

<script type="text/javascript">

	new nhn.api.map.Map('nmap', { // nmap 은 지도가 생성될 요소의 id값 입니다
		point : new nhn.api.map.LatLng(37.3211743, 127.00953), // 위도, 경도 설정
		zoom : 6, // 줌 설정 (1~14) 클수록 확대
		enableWheelZoom : false,
		enableDragPan : false,
		enableDblClickZoom : true,
		mapMode : 1,
		activateTrafficMap : true,
		activateBicycleMap : true,
		minMaxLevel : [ 1, 14 ],
		size : new nhn.api.map.Size(800, 600) // div 의 스타일값 보다 우선하는 지도크기 설정값 (숫자만 사용)
		// size 는 생략하면 div 에 설정된 값을 따릅니다
	});

</script>

실행 가능한 소스

적절한 기본 생성 예제

대략 이정도면 되지 않을까요?


<script src="http://openapi.map.naver.com/openapi/v2/maps.js?clientId=v6uq3Nmidx6gdSOddr1A"></script>
<!-- clientId 값을 발급받은 키로 변경하세요 -->
<div id="nmap" style="width:800px; height:600px;"></div>

<script type="text/javascript">

	var map = new nhn.api.map.Map('nmap', { // nmap 은 지도가 생성될 요소의 id값 입니다
		point : new nhn.api.map.LatLng(37.5195621, 127.0686184), // 위도, 경도 설정
		zoom : 8, // 줌 설정 (1~14), 클수록 확대
		activateTrafficMap : true, // 교통상황 표시
		activateBicycleMap : true, // 자전거도로 표시
	});

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

	// 줌 슬라이더 컨트롤
	tmp = new nhn.api.map.ZoomControl();
	tmp.setPosition({top:60, right:10}); // 위치 설정
	map.addControl(tmp); // 지도에 추가

</script>

실행 가능한 소스

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