다음지도 api - 마커 찍기 > 소스코드

• 목록

<div style="width:70%;margin:0px auto;">
    <div id="result" style="height:50px;border:1px solid #CCC;"></div>
    <p>
        <button onclick="setOverlayMapTypeId('roadmap')">일반 보기</button>
        <button onclick="setOverlayMapTypeId('skyview')">스카이뷰 보기</button>
        <!--<button onclick="setOverlayMapTypeId('hybrid')">하이브리드 보기</button>-->
        <button onclick="setOverlayMapTypeId('traffic')">교통정보 보기</button>
        <button onclick="setOverlayMapTypeId('roadview')">로드뷰 도로정보 보기</button>
        <button onclick="setOverlayMapTypeId('terrain')">지형정보 보기</button>
        <button onclick="setOverlayMapTypeId('use_district')">지적편집도 보기</button>
    </p>
    <div id="map" style="width:100%;height:700px;"></div>
</div>

    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=api키값"></script>
    <script>
        var container = document.getElementById('map');
        var options = {
            center: new kakao.maps.LatLng(33.3829026935118, 126.54363266903036),
            level: 9
        };

        var map = new kakao.maps.Map(container, options);
        //===============================================================================
        // 지도에 클릭 이벤트를 등록합니다
        // 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
        kakao.maps.event.addListener(map, 'click', function(mouseEvent) {

            // 클릭한 위도, 경도 정보를 가져옵니다
            var latlng = mouseEvent.latLng;

            var message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
            message += '경도는 ' + latlng.getLng() + ' 입니다';

            var resultDiv = document.getElementById('result');
            resultDiv.innerHTML = message;

        });
        //===============================================================================

        //===============================================================================
        // 마커를 표시할 위치와 내용을 가지고 있는 객체 배열입니다
        var positions = [
            {
                content: '<div style=\"text-align:center;padding:20px;\">카카오</div>',
                latlng: new kakao.maps.LatLng(33.42441136904507, 126.29018234846517)
            },
            {
                content: '<div>생태연못</div>',
                latlng: new kakao.maps.LatLng(33.48636621320827 , 126.44530571814585 )
            },
            {
                content: '<div>텃밭</div>',
                latlng: new kakao.maps.LatLng(33.541581959158314 , 126.74331978239742 )
            },
            {
                content: '<div>근린공원</div>',
                latlng: new kakao.maps.LatLng(33.29964078663909 , 126.1750676566889 )
            }
        ];

        for (var i = 0; i < positions.length; i ++) {
            // 마커를 생성합니다
            var marker = new kakao.maps.Marker({
                map: map, // 마커를 표시할 지도
                position: positions[i].latlng // 마커의 위치
            });

            // 마커에 표시할 인포윈도우를 생성합니다
            var infowindow = new kakao.maps.InfoWindow({
                content: positions[i].content // 인포윈도우에 표시할 내용
            });

            // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
            // 이벤트 리스너로는 클로저를 만들어 등록합니다
            // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
            kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
            kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
        }

        // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
        function makeOverListener(map, marker, infowindow) {
            return function() {
                infowindow.open(map, marker);
            };
        }

        // 인포윈도우를 닫는 클로저를 만드는 함수입니다
        function makeOutListener(infowindow) {
            return function() {
                infowindow.close();
            };
        }
        //===============================================================================
        //===============================================================================
        // 지도에 추가된 지도타입정보를 가지고 있을 변수입니다
        var currentTypeId;

        // 버튼이 클릭되면 호출되는 함수입니다
        function setOverlayMapTypeId(maptype) {
            var changeMaptype;

            // maptype에 따라 지도에 추가할 지도타입을 결정합니다
            if (maptype === 'roadmap') {
                changeMaptype = kakao.maps.MapTypeId.ROADMAP;

            } else if (maptype === 'skyview') {
                changeMaptype = kakao.maps.MapTypeId.SKYVIEW;

            } else if (maptype === 'hybrid') {
                changeMaptype = kakao.maps.MapTypeId.HYBRID;

            } else if (maptype === 'traffic') {

                // 교통정보 지도타입
                changeMaptype = kakao.maps.MapTypeId.TRAFFIC;

            } else if (maptype === 'roadview') {

                // 로드뷰 도로정보 지도타입
                changeMaptype = kakao.maps.MapTypeId.ROADVIEW;

            } else if (maptype === 'terrain') {

                // 지형정보 지도타입
                changeMaptype = kakao.maps.MapTypeId.TERRAIN;

            } else if (maptype === 'use_district') {

                // 지적편집도 지도타입
                changeMaptype = kakao.maps.MapTypeId.USE_DISTRICT;
            }

            // 이미 등록된 지도 타입이 있으면 제거합니다
            if (currentTypeId) {
                map.removeOverlayMapTypeId(currentTypeId);
            }

            // maptype에 해당하는 지도타입을 지도에 추가합니다
            map.addOverlayMapTypeId(changeMaptype);

            // 지도에 추가된 타입정보를 갱신합니다
            currentTypeId = changeMaptype;
        }
        //===============================================================================
    </script>