네이버 지도를 달아보자

지도 클릭시 위도 경도 보기

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

!! 네이버 지도 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:1200px; 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), 클수록 확대
	});

	// 일반, 위성 버튼
	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); // 지도에 추가


	// 지도에 클릭이벤트 추가
	map.attach('click', function(evt){
		// evt 는 클릭하면 전달되는 이벤트 입니다. (네이밍은 원하는대로 바꾸셔도 됩니다)
		// evt.point.getY() : 위도
		// evt.point.getX() : 경도
		alert(evt.point.getY() + ', ' + evt.point.getX());
	});

</script>

실행 가능한 소스

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