네이버 지도를 달아보자

네이버 지도 api 키 발급 받기와 지도 생성하기

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

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

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

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

※ 현재 예제는 v2 버전입니다. v3 버전도 곧 준비해 보겠습니다. v2 버전 예제도 다 못했는데요 ..^^;

시작 하며

이곳은 최대한 쉬운 예제가 되도록 노력한 내용들이 있는곳입니다. ^^;
그럼 시작해 보겠습니다 !!

공지 : v3 버전으로 지도 버전업

아직 예제를 다 만들지 못하는 사이 지도가 버전업 되었습니다. 관련 링크는 아래에 있습니다.
이곳의 예제들은 구버전 예제들로서.. 이제 수명이 다한것 같습니다.
새로운 API의 예제로 찾아뵙겠습니다. ㅠㅠ.. 현재 예제는 v2 버전 지도입니다.

저도 개인적으로 사용중인데 수정 해야할지 고민이 되는군요. (귀차니즘)
기존 버전은 계속 사용할 수 있지만 신규 키발급은 제한 된다고 합니다.

네이버 지도 api 키 발급 받기

먼저 아래 링크를 참고하여 API 키를 발급받습니다.
키를 발급받아야 지도를 사용할 수 있습니다.

등록을 완료하면 Client ID 라는것이 있는데 이게 API 키 입니다.

키를 발급 받기 위한 애플리케이션 등록 안내

네이버 지도 api 키 발급 받기


위 이미지를 참고하여 등록해 주세요. ^^
기준 화면 입니다.

자바스크립트 로딩


키를 발급 받았다면 아래 처럼 스크립트를 로딩합니다.
<script src="https://openapi.map.naver.com/openapi/v2/maps.js?clientId=API키"></script>

네이버 지도 스크립트 로딩하기

<script src="https://openapi.map.naver.com/openapi/v2/maps.js?clientId=v6uq3Nmidx6gdSOddr1A"></script>

※ API 키가 정확하지 않으면 지도가 생성되지 않습니다.
※ 예제의 키는 이 사이트에서만 사용할 수 있으므로 그대로 하시면 안됩니다. ^^;

초간단 지도 생성하기

그럼 당장! 지도를 생성해 볼까요?

최소한의 코드로 지도 생성만 해보기

<!-- 
키는 발급받은 것으로 변경해 주세요.
localhost 도메인으로 테스트 하신다면 cpw9RMOfkmb0qIa7Vz23 키를 사용해 보세요.
localhost 에서 동작하도록 생성해둔 키 입니다.
-->
<script src="https://openapi.map.naver.com/openapi/v2/maps.js?clientId=v6uq3Nmidx6gdSOddr1A"></script>
<!-- 아래 div 에 지도를 생성합니다 -->
<div id="nmap" style="width:800px; height:600px;"></div>

<script type="text/javascript">

	// 아주 간단한 지도 생성 예제
	new nhn.api.map.Map('nmap', { // nmap 은 지도가 생성될 요소의 id값 입니다 (원하시는 데로 네이밍!)
		point : new nhn.api.map.LatLng(37.2900533, 127.1036797) // 위도, 경도 설정 (이 값을 가운데로 하여 지도 생성)
	});

</script>

최소한의 코드로 지도를 생성해 보았습니다. 이렇게 간단히 !? 쉽죠? ㅎ

실행 가능한 소스

아마도 이 글을 보시고 있으신 분들중 업무상 또는 교육적 목적의 두가지 중 하나일 것이란(?) 생각이 듭니다. 이 글을 쓰고 있는 저는 그 두가지 목적은 아니군요.. ^^;

업무상 제일 간단한 용도의 사용 이라면 특정 업체의 위치를 지도에 표시하는 것 정도라고 할 수 있겠네요. 회사소개 홈페이지 같은것이죠. 서비스를 기획하면서 지도를 이용하는 경우도 있을것이고. 개인적인 용도로 사용할 목적도 있겠지요. 아무튼 이게 처음 접하면 어렵기도 하고, 의외로 삽질을 많이하게 됩니다. (부들부들)

이곳은 쉽고 빠르게 지도를 사용할 수 있도록 강좌 형태로 예제를 올려둔 공간입니다. 다음, 구글 지도도 해볼 예정입니다.

잠시 말이 많았네요.. 계속 진행해 보겠습니다. ^^;

지도 줌 설정하기


줌 설정하기

<div id="nmap" style="width:800px; height:600px;"></div>

<script type="text/javascript">

	new nhn.api.map.Map('nmap', { // nmap 은 지도가 생성될 요소의 id값 입니다
		point : new nhn.api.map.LatLng(37.2900533, 127.1036797), // 위도, 경도 설정
		zoom : 2 // 줌 설정 (1~14)
	});

</script>

zoom 수치는 1 ~ 14 입니다. 큰 숫자일 수록 지도가 확대(자세히 보기)됩니다.

자전거도로 표시

※ 지도 위치는 북한강 자전거길 춘천 부근입니다.

<div id="nmap" style="width:900px; height:600px;"></div>

<script type="text/javascript">

	new nhn.api.map.Map('nmap', { // nmap 은 지도가 생성될 요소의 id값 입니다
		point : new nhn.api.map.LatLng(37.8973778, 127.6956788), // 위도, 경도 설정
		zoom : 10, // 줌 설정 (1~14)
		activateBicycleMap : true // 자전거길 보이기, 기본값은 false
	});

</script>

activateBicycleMap 값에 true, false 를 사용합니다.
true 로 하면 보이고 기본값은 false 입니다.

컨트롤 붙이기

지도가 좀 허하죠. 컨트롤이 빠졌기 때문인데요. 붙여보겠습니다.
지도 오른쪽 위에 버튼과 슬라이더가 생겼습니다.

<div id="nmap" style="width:900px; height:600px;"></div>

<script type="text/javascript">

	// 지도를 컨트롤 하려면 객체를 설정해야합니다
	var map = new nhn.api.map.Map('nmap', {
		point : new nhn.api.map.LatLng(37.2238037, 128.7066091), // 위도, 경도 설정
		zoom : 11 // 줌 설정(1~14)
	});

	var tmp; // 임시용 변수

	// 일반, 위성 버튼
	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>

addControl() 을 이용해서 컨트롤을 추가합니다.
지금 쉬운가요? 사실 아직까지 어려운것은 없습니다. ^^;

컨트롤 위치 바꿔보기

바꿔 봅시다.
※ 지도 위치는 수원광교호수공원 입니다.

<div id="nmap" style="width:900px; height:600px;"></div>

<script type="text/javascript">

	// 지도를 컨트롤 하려면 변수로 설정해야합니다
	var map = new nhn.api.map.Map('nmap', {
		point : new nhn.api.map.LatLng(37.285442, 127.0686983), // 위도, 경도 설정
		zoom : 14 // 줌 설정(1~14)
	});

	var tmp; // 임시용 변수

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

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

</script>
방문해 주셔서 감사드립니다 !!