네이버 지도 종류 선택하기(버튼)

내가 찾던 '그' 방식

map을 생성할때 option 객체를 통해 생성하니 더욱 간결해서 좋다.

[링크 : https://navermaps.github.io/maps.js/docs/tutorial-3-control-positioning.example.html]

아래는 버튼을 따로 그리고 절대 좌표로 띄워놓는 방식

<style type="text/css"> #wrap .buttons { position:absolute;top:0;left:0;z-index:1000;padding:5px; } #wrap .buttons .control-btn { margin:0 5px 5px 0; } </style> <div id="wrap" class="section"> <h2>지도 유형 설정하기</h2> <p>지도의 유형을 설정하는 예제입니다. 이 예제는 jQuery 구문을 포함하고 있습니다.</p> <div id="map" style="width:100%;height:600px;"> <div class="buttons"> <input id="NORMAL" type="button" value="일반지도" class="control-btn control-on" /> <input id="TERRAIN" type="button" value="지형도" class="control-btn" /> <input id="SATELLITE" type="button" value="위성지도" class="control-btn" /> <input id="HYBRID" type="button" value="겹쳐보기" class="control-btn" /> </div> </div> <code id="snippet" class="snippet"></code> </div> <script id="code"> var map = new naver.maps.Map('map', { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }); var btns = $(".buttons > input"); btns.on("click", function(e) { e.preventDefault(); var mapTypeId = this.id; if (map.getMapTypeId() !== naver.maps.MapTypeId[mapTypeId]) { map.setMapTypeId(naver.maps.MapTypeId[mapTypeId]); // 지도 유형 변경하기 btns.removeClass("control-on"); $(this).addClass("control-on"); } }); </script>

[링크 : https://navermaps.github.io/maps.js/docs/tutorial-3-map-types.example.html]