에 v2 버전 지도 서비스가 종료되었습니다.
이제 v3 버전을 써야할 때가 되었습니다.
기존 서비스를 이렇게 종료할때가 제일 부들부들한 경우인데요 ...
v2 와 v3 는 지도 사용 방법이 다릅니다. v3 버전이 확실히 개선된 방법입니다.
※ 현재 예제는 v2 버전입니다. v3 버전도 곧 준비해 보겠습니다. v2 버전 예제도 다 못했는데요 ..^^;
등록일 : ,
!! 네이버 지도 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>실행 가능한 소스
방문해 주셔서 감사드립니다 !!