네이버 지도 api 예제

클릭한 위치 위도·경도 보기 (클릭 이벤트 적용)

전체 기초 간단 예제
등록일 :

지도를 클릭하면 해당 위치의 위도 경도 보기

- 클릭한 위치의 위도 경도를 경고창으로 봅니다.

아래 지도를 클릭해 보세요.

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

<!-- 사용한 지도 Client ID : mn7cwsrvym 은 "localhost" 에서 테스트 용도로 사용할 수 있습니다. -->
<script src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=mn7cwsrvym"></script>

HTML

<!-- 지도가 생성되는 div 영역, id 는 naverMap 으로 설정 -->
<div id="naverMap" style="margin:0 auto; width:1000px; max-width:100%; height:650px;"></div>

자바스크립트

var nmap = new naver.maps.Map('naverMap', { // naverMap 값은 div 의 id 값
	center : new naver.maps.LatLng(37.5782709,126.9770043), // 지도 중앙 위치 : 위도, 경도 설정
	zoom : 10, // 줌 설정 : 1~14, 수치가 클수록 지도 확대(줌인), 이 옵션 생략시 기본값 9
	zoomControl : true, // 줌 컨트롤 표시 (기본값 표시안함)
	zoomControlOptions : { // 줌 컨트롤 오른쪽 위로 위치 설정
		position : naver.maps.Position.TOP_RIGHT // 오른쪽 위로 설정값
	},
	mapTypeControl : true, // 일반ㆍ위성 지도보기 컨트롤 표시 (기본값 표시안함)
});


// 클릭이벤트를 적용하여 경고창으로 위도 경도를 봅니다.
naver.maps.Event.addListener(nmap, 'click', function(e){
	// 지도를 클릭하면 아래 내용이 실행됩니다.
	alert(e.coord.lat() + ', ' + e.coord.lng());
	// e 는 클릭시 넘어오는 이벤트 (네이밍은 원하는 대로 하셔도 됩니다)
	// e 에서 필요한 것을 꺼내서 쓰면 됩니다.
	// e.coord.lat() 는 위도 (Latitude)  보통 약어로 lat
	// e.coord.lng() 는 경도 (Longitude) 보퉁 약어로 lng
});

실행 가능한 소스

텍스트 입력창에 위도 경도 넣어보기

- 클릭한 위치의 위도 경도를 텍스트 입력창에 넣어봅니다.

아래 지도를 클릭해 보세요.
위도 : 경도 :

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

<!-- 사용한 지도 Client ID : mn7cwsrvym 은 "localhost" 에서 테스트 용도로 사용할 수 있습니다. -->
<script src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=mn7cwsrvym"></script>

HTML

<!-- 지도가 생성되는 div 영역, id 는 naverMap 으로 설정 -->
<div id="naverMap" style="margin:0 auto; width:1000px; max-width:100%; height:650px;"></div>
<div style="text-align:center; margin-top:10px;">
	위도 : <input type="text" name="namp_lat" />
	경도 : <input type="text" name="namp_lng" />
</div>

자바스크립트

var nmap = new naver.maps.Map('naverMap', { // naverMap 값은 div 의 id 값
	center : new naver.maps.LatLng(37.5782709,126.9770043), // 지도 중앙 위치 : 위도, 경도 설정
	zoom : 1, // 줌 설정 : 1~14, 수치가 클수록 지도 확대(줌인), 이 옵션 생략시 기본값 9
	zoomControl : true, // 줌 컨트롤 표시 (기본값 표시안함)
	zoomControlOptions : { // 줌 컨트롤 오른쪽 위로 위치 설정
		position : naver.maps.Position.TOP_RIGHT // 오른쪽 위로 설정값
	},
	mapTypeControl : true, // 일반ㆍ위성 지도보기 컨트롤 표시 (기본값 표시안함)
});


naver.maps.Event.addListener(nmap, 'click', function(e){
	// 제이쿼리 사용
	$('[name=namp_lat]').val( e.coord.lat() ); // 위도
	$('[name=namp_lng]').val( e.coord.lng() ); // 경도
});

실행 가능한 소스

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