네이버 지도 api 예제

지도 옵션ㆍ컨트롤 버튼 알아보기 2 (지도타입 버튼, 줌 슬라이더 컨트롤)

전체 기초 간단 예제
URL : https://ktsmemo.cafe24.com/s/naver_map_v3/291
등록일 :

mapTypeControl : 지도 일반ㆍ위성 버튼 표시 여부

아래 지도에서 오른쪽위 "일반 위성" 버튼이 지도타입 컨트롤 입니다.
약간 의외지만 이 지도 타입 컨트롤은 표시하지 않음이 기본값 입니다.

mapTypeControl : true

위 옵션을 설정하면 보입니다.



버튼을 번갈아 가면서 눌러보세요.

네이버 지도 스크립트 로딩

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

CSS

/* 지도를 생성할 div 요소에 스타일을 설정합니다 */
#map_v3 {
	height:500px;
	margin:0 auto;
	width:800px;
	max-width:100%;
	margin-bottom:10px;
}

HTML

<div id="map_v3"></div>
<!-- 이 div 에 지도가 생성됩니다. id 는 map_v3 로 설정해봤습니다. -->

<button type="button" class="" onclick="nmap.setOptions({ mapTypeControl : true })">mapTypeControl : true</button>
<button type="button" class="" onclick="nmap.setOptions({ mapTypeControl : false })">mapTypeControl : false</button>
<!-- 스크립트로 컨트롤 버튼 제어하기 -->

<br><br>버튼을 번갈아 가면서 눌러보세요.

자바스크립트

var nmap = new naver.maps.Map('map_v3', { // map_v3 사용
	center : new naver.maps.LatLng(33.3617763, 126.5326061), // 지도 위치
	zoom : 11, // 지도 줌 레벨 1 ~ 14 (클수록 줌인(확대))
	mapTypeControl : true
	// 사용하려면 위처럼 지정해 주어야 합니다.
});

실행 가능한 소스

zoomControl : 지도 줌 슬라이더 표시 여부


역시 이 컨트롤도 표시하지 않음이 기본값 입니다.

zoomControl : true

위 옵션을 설정하면 보입니다.
기본 위치는 왼쪽위 입니다.



버튼을 번갈아 가면서 눌러보세요.

CSS

/* 지도를 생성할 div 요소에 스타일을 설정합니다 */
#map_v3 {
	height:500px;
	margin:0 auto;
	max-width:100%;
	width:800px;
	margin-bottom:10px;
}

HTML

<div id="map_v3"></div>
<!-- 이 div 에 지도가 생성됩니다. id 는 map_v3 로 설정해봤습니다. -->

<button type="button" class="" onclick="nmap.setOptions({ zoomControl : true })">zoomControl : true</button>
<button type="button" class="" onclick="nmap.setOptions({ zoomControl : false })">zoomControl : false</button>
<!-- 스크립트로 컨트롤 버튼 제어하기 -->

<br><br>버튼을 번갈아 가면서 눌러보세요.

자바스크립트

var nmap = new naver.maps.Map('map_v3', {
	center : new naver.maps.LatLng(33.3617763, 126.5326061),
	zoom : 11, // 지도 줌 레벨 1 ~ 14 (클수록 줌인(확대))
	mapTypeControl : true, // 일반ㆍ위성 버튼
	zoomControl: true, // 줌 슬라이더
	// 사용하려면 위처럼 지정해 주어야 합니다.
});

zoomControlOptions : 줌 슬라이더 위치 이동하기


zoomControlOptions 을 사용해서 옵션을 설정하여 위치를 변경할 수 있습니다.
그런데 아래 예제에서 슬라이더 컨트롤의 위치가 좀 이상하죠?

어색한 위치에 가서 붙어있습니다.

CSS

/* 지도를 생성할 div 요소에 스타일을 설정합니다 */
#map_v3 {
	height:500px;
	margin:0 auto;
	max-width:100%;
	width:800px;
	margin-bottom:10px;
}

HTML

<div id="map_v3"></div>
<!-- 이 div 에 지도가 생성됩니다. id 는 map_v3 로 설정해봤습니다. -->

자바스크립트

var nmap = new naver.maps.Map('map_v3', { // map_v3 사용
	center : new naver.maps.LatLng(33.3617763, 126.5326061), // 지도 위치
	zoom : 11,
	mapTypeControl : true, // 일반ㆍ위성 버튼
	zoomControl : true,
	zoomControlOptions : { // 줌 컨트롤 옵션
		position : naver.maps.Position.TOP_RIGHT // 오른쪽 위로 위치 설정
	}
});

설정하는 순서에 따라 배치가 달라지는 컨트롤

아래 예제는 줌 슬라이더와 지도 타입 컨트롤을 보이게 만드는 옵션 순서를
서로 다르게 설정해 본 예제입니다.

즉, 순서에 따라 컨트롤 배치가 다르므로 이에 맞게 사용해야 합니다. (순서를 따질줄이야 !?)

　왼쪽 지도 : 지도 타입 컨트롤(일반ㆍ위성) 먼저 설정
오른쪽 지도 : 줌 슬라이더 컨트롤 먼저 설정

- 줌 슬라이더 컨트롤을 먼저 설정하는게 자연스럽다.
- 이것을 눈치채지 못채면 일명 삽질 가능성이 있다(!?)

CSS

#map_v3, #map_v3_2 {
	height:350px;
	width:450px;
	display:inline-block;
}

HTML

<div style="text-align:center;">
	<div id="map_v3"></div>
	<div id="map_v3_2"></div>
</div>

자바스크립트

new naver.maps.Map('map_v3', {
	center : new naver.maps.LatLng(33.3617763, 126.5326061),
	zoom : 11,
	mapTypeControl : true, // 지도타입 컨트롤 먼저 설정
	zoomControl : true,
	zoomControlOptions : { // 줌 슬라이더 컨트롤 옵션
		position : naver.maps.Position.TOP_RIGHT // 오른쪽 위로 위치 설정
	}
});

new naver.maps.Map('map_v3_2', {
	center : new naver.maps.LatLng(33.3617763, 126.5326061),
	zoom : 11,
	zoomControl : true, // 줌 슬라이더 컨트롤 먼저 설정
	zoomControlOptions : {
		position : naver.maps.Position.TOP_RIGHT
	},
	mapTypeControl : true
});

줌 슬라이더 위치 설정 하기위한 설정 값

naver.maps.Position.BOTTOM_CENTER
naver.maps.Position.BOTTOM_LEFT
naver.maps.Position.BOTTOM_RIGHT
naver.maps.Position.CENTER
naver.maps.Position.LEFT_BOTTOM
naver.maps.Position.LEFT_CENTER
naver.maps.Position.LEFT_TOP
naver.maps.Position.RIGHT_BOTTOM
naver.maps.Position.RIGHT_CENTER
naver.maps.Position.RIGHT_TOP
naver.maps.Position.TOP_CENTER
naver.maps.Position.TOP_LEFT
naver.maps.Position.TOP_RIGHT

위 속성 값들은 각각 고유한 숫자 값을 가지고 있습니다.
그 값을 바로 사용해도 되지만, 위 코드를 사용하는것이 더 좋습니다.

사용은 아래처럼

        var nmap = new naver.maps.Map('map_v3', {
                center : new naver.maps.LatLng(33.3617763, 126.5326061),
                zoom : 11,
                zoomControl : true,
                zoomControlOptions : {
                        position : naver.maps.Position.TOP_RIGHT
                }
        });

그리고 아래 버튼을 눌러서 값을 확인해 보세요.

HTML

<button type="button" onclick="alert(naver.maps.Position.BOTTOM_CENTER)">BOTTOM_CENTER</button>
<button type="button" onclick="alert(naver.maps.Position.LEFT_BOTTOM)">LEFT_BOTTOM</button>
<button type="button" onclick="alert(naver.maps.Position.RIGHT_BOTTOM)">RIGHT_BOTTOM</button>
<button type="button" onclick="alert(naver.maps.Position.TOP_RIGHT)">TOP_RIGHT</button>
<button type="button" onclick="alert(typeof naver.maps.Position.TOP_RIGHT)">typeof TOP_RIGHT</button>

스크립트로 줌 슬라이더 위치 이동 해보기

설정에 따라 이동하는 위치를 볼 수 있도록 만들어 보았습니다.

지도 타입
네이버 로고
네이버 문구
축척 표시

CSS

#map_v3 {
	height:450px;
	margin:0 auto;
	max-width:100%;
	width:600px;
	margin-bottom:10px;
}

.nmap { text-align:center; margin-top:5px; }
.nmap button { width:130px; height:40px; }
.nmap.big button { width:200px; }
.nmap.big span { width:130px; display:inline-block; text-align:right; }

HTML

<div id="map_v3"></div>

<div class="nmap">
	<button type="button" onclick="nmapPosition('TOP_LEFT')">TOP_LEFT</button>
	<button type="button" onclick="nmapPosition('TOP_CENTER')">TOP_CENTER</button>
	<button type="button" onclick="nmapPosition('TOP_RIGHT')">TOP_RIGHT</button>
</div>
<div class="nmap">
	<button type="button" onclick="nmapPosition('LEFT_CENTER')">LEFT_CENTER</button>
	<button type="button" onclick="nmapPosition('CENTER')">CENTER (안됨)</button>
	<button type="button" onclick="nmapPosition('RIGHT_CENTER')">RIGHT_CENTER</button>
</div>
<div class="nmap">
	<button type="button" onclick="nmapPosition('BOTTOM_LEFT')">BOTTOM_LEFT</button>
	<button type="button" onclick="nmapPosition('BOTTOM_CENTER')">BOTTOM_CENTER</button>
	<button type="button" onclick="nmapPosition('BOTTOM_RIGHT')">BOTTOM_RIGHT</button>
</div>
<br>
<div class="nmap big">
	<span>지도 타입</span>
	<button type="button" onclick="nmap.setOptions({ mapTypeControl : true })">mapTypeControl : true</button>
	<button type="button" onclick="nmap.setOptions({ mapTypeControl : false })">mapTypeControl : false</button>
</div>
<div class="nmap big">
	<span>네이버 로고</span>
	<button type="button" onclick="nmap.setOptions({ logoControl : true })">logoControl : true</button>
	<button type="button" onclick="nmap.setOptions({ logoControl : false })">logoControl : false</button>
</div>
<div class="nmap big">
	<span>네이버 문구</span>
	<button type="button" onclick="nmap.setOptions({ mapDataControl : true })">mapDataControl : true</button>
	<button type="button" onclick="nmap.setOptions({ mapDataControl : false })">mapDataControl : false</button>
</div>
<div class="nmap big">
	<span>축척 표시</span>
	<button type="button" onclick="nmap.setOptions({ scaleControl : true })">scaleControl : true</button>
	<button type="button" onclick="nmap.setOptions({ scaleControl : false })">scaleControl : false</button>
</div>

자바스크립트


	var nmap = new naver.maps.Map('map_v3', { // map_v3 사용
		center : new naver.maps.LatLng(33.3617763, 126.5326061), // 지도 위치
		zoom : 11,
		zoomControl : true,
		zoomControlOptions : { // 줌 컨트롤 옵션
			position : naver.maps.Position.TOP_RIGHT // 오른쪽 위로 위치 설정
		}
	});

	function nmapPosition(v){
		nmap.setOptions({
			zoomControlOptions : {
				position : naver.maps.Position[v]
			}
		});
	}
방문해 주셔서 감사드립니다 !!