등록일 : ,
기본 컨트롤과 원하는 위치로 지도 맞추기
- 일반, 위성 지도보기 컨트롤 사용
- 확대, 축소 슬라이더 컨트롤 사용
네이버 지도 스크립트 로딩하기
<!-- 사용한 지도 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,
});
실행 가능한 소스
방문해 주셔서 감사드립니다 !!