네이버 지도 api 예제

지도 옵션ㆍ컨트롤 버튼 알아보기 1 (네이버 로고ㆍ문구, 축척표시)

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

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


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

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

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

지도상의 네이버 로고


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

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

※ 에 추가된 내용
확인해 보니 이제 로고는 제거할 수 없습니다.
제거할 수 없도록 수정된것으로 보입니다. (아쉽)


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

네이버 지도 스크립트 로딩

<!-- 사용한 지도 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,
});

실행 가능한 소스

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