위토즈 - 개발자프로그램판매공간

정보공유

[API] 네이버 Maps Javascript API V3 - 클릭한 지점에 마커 찍고 정보 레이어로 보여주기.

 

참고 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>

 

 

정보공유
Total 444건 19 페이지
번호 제목 글쓴이 날짜 조회
174 연락처 앞대가리 목록 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-14 35760
173 페이스북 GRAPH API & IFRAME BASE FACEBOOK APPLICATION DEVELOPMENT 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-03 47881
172 저작권 걱정없는 무료글꼴 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11-01 51144
171 엑셀 다운로드 할때 깨질경우. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-28 40790
170 [javascript] YYYY-MM-DD 값을 한글날짜로 리턴. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-28 43089
열람중 네이버 Maps Javascript API V3 - 클릭한 지점에 마커 찍고 정보 레이어로 보여주기. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-26 41141
168 네이밍, 코딩룰 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-24 51584
167 무통장입금확인 후 주문목록에서 바로 입금완료처리 기능 추가하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-21 41522
166 [다음 지도 api] 클러스터러 + 인포윈도우 + 사용자콘트롤박스 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-21 55621
165 [javascript] 구글 자동 번역 API 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-20 47729
164 그누보드에 nginx fastcgi_cache 적용하기 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-20 56949
163 SMS발송 반드시 발신번호를 등록해야합니다. 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-20 50892
162 [asp] 네이버 스마트 에디터 파일업로드 소스 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10-19 45196
161 KCP 웹표준모듈 적용 코드 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-21 38473
160 [javascript] 입력필드(사용자가 키보드를 처서 입력하는)의 입력값이 숫자만 들어가도록 할 때 위토즈쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 09-20 38431