컨트롤 버튼 컨트롤 해보기 1

컨트롤의 종류를 알아보기 쉽게 간단한 예제를 만들어 보았습니다.
지도는 컨트롤이 잘 보이는 위치로 설정했습니다. (친절모드)
그럼 다양한 컨트롤들을 하나씩 살펴보겠습니다.

지도 아래에 테스트 버튼을 배치했습니다.
그냥 순서대로 한번씩 눌러보시면 됩니다. ^^

logoControl : 초록색 네이버 로고 표시 여부

지도상의 네이버 로고

지도 오른쪽 아래에 위와 같은 네이버 로고가 나옵니다.
의외지만 이 로고를 제거할 수 있습니다.

기본값은 "보임" 입니다.

※ 2019년 3월 22일(금) 379일(약 1년) 전 에 추가된 내용
확인해 보니 이제 로고는 제거할 수 없습니다.
제거할 수 없도록 수정된것으로 보입니다. (아쉽)

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

네이버 지도 스크립트 로딩

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

CSS

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

HTML

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

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

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

자바스크립트

var nmap = new naver.maps.Map('map_v3', { // map_v3 사용
	center : new naver.maps.LatLng(37.9429196, 127.8912059), // 지도 위치
	zoom : 11,
	logoControl : true
	// 임의로 지정하지 않을때 기본값은 true 입니다.
	// 사용하지 않으려면 false 를 입력합니다.
});

mapDataControl : 지도 정보 문구 표시 여부

지도 왼쪽 아래에 네이버 문구가 있습니다.
이 문구도 제거할 수 있네요. (올ㅋ)

기본값은 "보임" 입니다.

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

HTML

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

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

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

자바스크립트

var nmap = new naver.maps.Map('map_v3', {
	center : new naver.maps.LatLng(36.4087379, 127.5049855),
	zoom : 12,
	logoControl : false,
	mapDataControl : true
	// mapDataControl 은 임의로 지정하지 않을때 기본값은 true 입니다.
	// 사용하지 않으려면 false 를 입력합니다.
});

scaleControl : 축척 정보 표시 여부

지도 오른쪽 아래에 축척 표시가 있습니다. 기본값은 "보임" 입니다.
보이지 않게 하려면 scaleControl : false 로 설정합니다.

아래 예제는 보이지 않게 설정하였습니다.

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

HTML

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

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

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

자바스크립트

var nmap = new naver.maps.Map('map_v3', {
	center : new naver.maps.LatLng(36.9519206, 128.0469636),
	zoom : 11,
	logoControl : false,
	mapDataControl : false,
	scaleControl : false,
	// scaleControl 은 설정하지 않을때 기본값은 true 입니다.
	// 사용하지 않으려면 위 처럼 설정해 주세요.
});

마무리 : 지도 하단 3종 세트 표시 테스트

위 3개의 옵션을 한번에 테스트 해보세요.

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

HTML

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

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

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

자바스크립트

var nmap = new naver.maps.Map('map_v3', {
	center : new naver.maps.LatLng(36.5855188, 128.8555499),
	zoom : 11,
	logoControl : false,
	mapDataControl : false,
	scaleControl : false,
});

실행 가능한 소스

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>네이버 지도 api 예제 : 기초 : 지도 옵션ㆍ컨트롤 버튼 알아보기 1 (네이버 로고ㆍ문구, 축척표시)</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div style="text-align:center; margin:0 0 100px 0; background:#555; line-height:80px;">
	<a style="color:#fff; font-weight:bold; font-family:tahoma; font-size:20pt;" href="https://ktsmemo.cafe24.com/s/naver_map_v3/246" target="_blank">https://ktsmemo.cafe24.com/s/naver_map_v3/246</a>
</div>


<!-- 예제 시작 -->

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

<style type="text/css">

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

</style>

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

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

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

<script>

	var nmap = new naver.maps.Map('map_v3', {
		center : new naver.maps.LatLng(36.5855188, 128.8555499),
		zoom : 11,
		logoControl : false,
		mapDataControl : false,
		scaleControl : false,
	});

</script>

<!-- 예제 종료 -->


</body>
</html>

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