- 정보공유
[API] 네이버 Maps Javascript API V3 - 클릭한 지점에 마커 찍고 정보 레이어로 보여주기.
- 작성일
- 16-10-26 17:11
- 조회수
- 41,140 건
- 댓글
- 0 건
https://navermaps.github.io/maps.js/docs/tutorial-1-event-simple.examp…11176회 연결
참고 URL : https://navermaps.github.io/maps.js/docs/tutorial-1-event-simple.example.html
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId={NAVER Client ID}"></script> <div id="map" style="width:100%;height:300px;"></div> <script type="text/javascript"> <!-- function _jsLoadMap() { var defaultCenter = new naver.maps.LatLng(37.5666805, 126.9784147); var map = new naver.maps.Map('map', { center: defaultCenter, scaleControl: true, logoControl: false, mapTypeControl: true, mapTypeControlOptions: { style: naver.maps.MapTypeControlStyle.BUTTON, position: naver.maps.Position.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: naver.maps.ZoomControlStyle.BIG, position: naver.maps.Position.TOP_LEFT }, minZoom: 1, zoom: 10, mapTypeId: naver.maps.MapTypeId.NORMAL }); var marker = new naver.maps.Marker({ position: defaultCenter, map: map }); var menuLayer = $('<div style="position:absolute;z-index:10000;background-color:#fff;border:solid 1px #333;padding:10px;display:none;"></div>'); map.getPanes().floatPane.appendChild(menuLayer[0]); naver.maps.Event.addListener(map, 'click', function(e) { marker.setPosition(e.coord); menuLayer.hide(); var coordHtml = 'Coord: '+ e.coord +'<br />Point: '+ e.point +'<br />Offset: '+ e.offset; menuLayer.show().css({ left: e.offset.x, top: e.offset.y }).html(coordHtml); }); } window.onload = function() { _jsLoadMap(); } //--> </script>