네이버 지도를 달아보자

스크립트로 지도위치 제어하기

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

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

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

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

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


이번에는 지도 위치와 줌을 스크립트로 제어해 보겠습니다.

버튼을 눌러 지정된 위치보기

위도, 경도를 이용하여 지도 위치를 설정해 보는 예제입니다.
지도 아래 버튼을 누르면 설정된 위치로 이동합니다.
아래 버튼을 눌러보세요.


<script src="https://openapi.map.naver.com/openapi/v2/maps.js?clientId=v6uq3Nmidx6gdSOddr1A"></script>
<!-- 지도 키는 발급받은 키로 수정하세요! -->
<div id="nmap" style="width:1000px; height:550px;"></div>
<div style="text-align:center; padding:10px;">
	아래 버튼을 눌러보세요.<br><br>
	<button class="s" type="button" onclick="setPosition(37.2591625, 127.1210474, 12)">한국 민속촌</button>
	<button class="s" type="button" onclick="setPosition(36.7516249, 128.0320148, 14)">문경새재 정상</button>
	<button class="s" type="button" onclick="setPosition(33.3766479, 126.5684007, 5)">제주도</button>
	<button class="s" type="button" onclick="setPosition(37.2410353, 131.8670601, 12)">독도</button>
	<button class="s" type="button" onclick="setPosition(37.5512709, 126.9882764, 13)">N서울타워</button>
	<button class="s" type="button" onclick="setPosition(37.691445, 129.0326837, 14)">정동진역</button>
	<button class="s" type="button" onclick="setPosition(37.5742697, 126.9562211, 13)">서대문형무소</button>
	<button class="s" type="button" onclick="setPosition(36.7506072, 128.2650568, 12)">윤필암</button>
</div>

<script type="text/javascript">

	// 지도를 컨트롤 하려면 변수로 설정해야합니다
	var map = new nhn.api.map.Map('nmap', {
		point : new nhn.api.map.LatLng(36.6913546, 127.9463217), // 위도, 경도 설정
		zoom : 2 // 줌 설정 (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); // 지도에 추가


	// 위치와 줌 설정
	function setPosition(lat, lng, zoom){
		map.setCenter(new nhn.api.map.LatLng(lat, lng)); // 위도 경도 설정
		map.setLevel(zoom); // 줌 설정 (1~14), 클수록 확대
	}

</script>

실행 가능한 소스

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