등록일 : ,
컨트롤 버튼 컨트롤 해보기 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,
});
실행 가능한 소스
방문해 주셔서 감사드립니다 !!