네이버 지도 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:700px;"></div>

자바스크립트

// naverMap 값은 div 의 id
new naver.maps.Map('naverMap', {

	// 지도 중앙 위치 : 위도, 경도 설정
	center : new naver.maps.LatLng( 37.5782709, 126.9770043 ),

	// 줌 설정 : 1~14, 수치가 클수록 지도 확대(줌인), 이 옵션 생략시 기본값 9
	zoom : 10,

	// 줌 컨트롤 표시, 지정하지 않으면 false 가 기본값
	zoomControl : true,

	// 줌 컨트롤 오른쪽 위로 위치 설정
	zoomControlOptions : {
		position : naver.maps.Position.TOP_RIGHT // 오른쪽 위로 설정
	},

	// 일반ㆍ위성 지도보기 컨트롤 표시, 지정하지 않으면 false 가 기본값
	mapTypeControl : true,

});

실행 가능한 소스

위 예제에서 설정 조금 바꿔보기

- zoom 값을 1 로 설정해서 최대 축소값으로 보기
- 모든 컨트롤 삭제 (원래는 이게 기본값)

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

<!-- 사용한 지도 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:700px;"></div>

자바스크립트

// naverMap 값은 div 의 id
new naver.maps.Map('naverMap', {

	// 지도 중앙 위치 : 위도, 경도 설정
	center : new naver.maps.LatLng( 37.5782709, 126.9770043 ),

	// 줌 설정 : 1~14, 수치가 클수록 지도 확대(줌인), 이 옵션 생략시 기본값 9
	zoom : 1,

});

실행 가능한 소스

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