- 정보공유
[API] 네이버 Maps Javascript API V3 - 클릭한 지점에 마커 찍고 정보 레이어로 보여주기.
- 작성일
- 16-10-26 17:11
- 조회수
- 47,528 건
- 댓글
- 0 건
https://navermaps.github.io/maps.js/docs/tutorial-1-event-simple.examp…14256회 연결
참고 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>