https://www.kasa.go.kr/pcms/common/js/acego.map.js;jsessionid=ytmh…Al0O8a-0oNE8EIX52fRK3JnWi8UZmJX_.homepage20

1/**
2 * 카카오 맵 구현 데이터 속성을 가진 HTML 컨테이너 생성:
3 * <!-- 하나의 마커를 가진 지도 -->
4 * <div data-map="map"
5 * data-lat="37.5665" data-lng="126.9780" data-title="위치 이름" data-info="주소 또는 추가 정보"
6 * data-level="3" data-draggable="true" data-zoomable="true" data-typecontrol="false" style="width:100%;height:400px;">
7 * </div>
8 * data-lat: 지도 중심 및 마커의 위도 (위치).
9 * data-lng: 지도 중심 및 마커의 경도 (위치).
10 * data-title: 마커 위에 표시될 제목 (옵션).
11 * data-info: 마커 위에 표시될 추가 정보 (옵션).
12 * <!-- 다중 마커를 가진 지도 -->
13 * <div data-map="map" data-lat="37.5665" data-lng="126.9780"
14 * data-level="3" data-draggable="true" data-zoomable="true" data-typecontrol="true"
15 * data-mk1-lat="37.5665" data-mk1-lng="126.9780" data-mk1-title="Marker 1" data-mk1-info="marker 1 샘플"
16 * data-mk2-lat="37.5650" data-mk2-lng="126.9775" data-mk2-title="Marker 2" data-mk2-info="marker 2 샘플"
17 * style="width:100%;height:400px;">
18 * </div>
19 * data-mk1-lat, data-mk1-lng: 첫 번째 마커의 위도와 경도 값.
20 * data-mk1-title, data-mk1-info: 첫 번째 마커에 표시될 제목과 정보.
21 * data-mk2-lat, data-mk2-lng: 두 번째 마커의 위도와 경도 값.
22 * data-mk2-title, data-mk2-info: 두 번째 마커에 표시될 제목과 정보.
23 * data-mk3-lat, data-mk3-lng: 세 번째 마커의 위도와 경도 값.
24 * data-mk3-title, data-mk3-info: 세 번째 마커에 표시될 제목과 정보.
25 * 사용 가능한 데이터 속성:
26 * - data-level: 줌 레벨 (기본값: 3)
27 * - data-draggable: 맵 드래그 가능 여부 (기본값: true)
28 * - data-zoomable: 줌 가능 여부 (기본값: true)
29 * - data-typecontrol: 지도 유형 컨트롤 표시 여부 (기본값: false)
30 */
31if ($("[data-map='map']").length > 0) {
32window.kakao=window.kakao||{},window.kakao.maps=window.kakao.maps||{},window.daum&&window.daum.maps?window.kakao.maps=window.daum.maps:(window.daum=window.daum||{},window.daum.maps=window.kakao.maps),function(){function a(){if(o.length){n(s[o.shift()],a).start()}else e()}function n(a,n){var e=document.createElement("script");return e.onload=n,e.onreadystatechange=function(){/loaded|complete/.test(this.readyState)&&n()},{start:function(){e.src=a||"",
33        document.getElementsByTagName("head")[0].appendChild(e),e=null}}}function e(){for(;i[0];)i.shift()();t.readyState=2}var t=kakao.maps=kakao.maps||{};if(void 0===t.readyState)t.onloadcallbacks=[],t.readyState=0;else if(2===t.readyState)return;t.URI_FUNC={ROADMAP:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD01/v17_9nwki/"+e+"/"+n+"/"+a+".png"},HYBRID:function(a,n,e){
34        return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_SKYH01/v16_kyo0b/"+e+"/"+n+"/"+a+".png"},ROADVIEW:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_RV01/v09_qxjfl/"+e+"/"+n+"/"+a+".png"},BICYCLE:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_BIKE01/v07_od0v7/"+e+"/"+n+"/"+a+".png"},USE_DISTRICT:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_CAD01/v09_ie9ma/"+e+"/"+n+"/"+a+".png"},
35    SR:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_SR01/v22_vnrcz/"+e+"/"+n+"/"+a+".png"},BBOUND:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_BBOUND01/v06_awocz/"+e+"/"+n+"/"+a+".png"},HBOUND:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_HBOUND01/v06_ieyas/"+e+"/"+n+"/"+a+".png"},TRAFFIC:function(a,n,e){return"r.maps.daum-img.net/mapserver/file/realtimeroad/L"+e+"/"+n+"/"+a+".png"},
36    ROADMAP_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG01/v23_izbfy/"+e+"/"+n+"/"+a+".png"},HYBRID_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_SKYH01/v15_vjvpr/"+e+"/"+n+"/"+a+".png"},ROADVIEW_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_RV01/v09_lq0s9/"+e+"/"+n+"/"+a+".png"},BICYCLE_HD:function(a,n,e){
37        return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_BIKE01/v07_tkmex/"+e+"/"+n+"/"+a+".png"},USE_DISTRICT_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_CAD01/v12_npeon/"+e+"/"+n+"/"+a+".png"},SR_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNGSD_SR01/v22_vnrcz/"+e+"/"+n+"/"+a+".png"},BBOUND_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_BBOUND01/v06_znmfq/"+e+"/"+n+"/"+a+".png"},
38    HBOUND_HD:function(a,n,e){return"map.daumcdn.net/map_k3f_prod/bakery/image_map_png/PNG_HBOUND01/v06_hqcww/"+e+"/"+n+"/"+a+".png"},TRAFFIC_HD:function(a,n,e){return"r.maps.daum-img.net/mapserver/file/realtimeroad_hd/L"+e+"/"+n+"/"+a+".png"}},t.VERSION={ROADMAP_SUFFIX:"",SKYVIEW_VERSION:"160114",SKYVIEW_HD_VERSION:"160107"},t.RESOURCE_PATH={ROADVIEW_AJAX:"//t1.daumcdn.net/roadviewjscore/core/css3d/200204/standard/1580795088957/roadview.js",
39    ROADVIEW_CSS:"//t1.daumcdn.net/roadviewjscore/core/openapi/standard/230727/roadview.js"};for(var r,p="https:"==location.protocol?"https:":"http:",m="",d=document.getElementsByTagName("script"),_=d.length;r=d[--_];)if(/\/(beta-)?dapi\.kakao\.com\/v2\/maps\/sdk\.js\b/.test(r.src)||/\/map_js_init\/open4\.test\.js\b/.test(r.src)||/\/map_js_init\/open4\.cbt\.js\b/.test(r.src)){m=r.src;break}d=null;var i=t.onloadcallbacks,o=["v3"],c="",s={v3:p+"//t1.daumcdn.net/mapjsapi/js/main/4.4.14/kakao.js",
40    services:p+"//t1.daumcdn.net/mapjsapi/js/libs/services/1.0.2/services.js",drawing:p+"//t1.daumcdn.net/mapjsapi/js/libs/drawing/1.2.6/drawing.js",clusterer:p+"//t1.daumcdn.net/mapjsapi/js/libs/clusterer/1.0.9/clusterer.js"},u=function(a){var n={};return a.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(a,e,t){n[e]=t}),n}(m);c=u.appkey,c&&(t.apikey=c),t.version="4.4.14";var g=u.libraries;if(g&&(o=o.concat(g.split(","))),"false"!==u.autoload){for(var _=0,k=o.length;_<k;_++)!function(a){

41    a&&document.write('<script charset="UTF-8" src="'+a+'"><\/script>')}(s[o[_]]);t.readyState=2}t.load=function(n){switch(i.push(n),t.readyState){case 0:t.readyState=1,a();break;case 2:e()}}}();
42$(function () {
43    // CreateMap 생성자 함수
44    var CreateMap = function (element, options) {
45        this.init(element, options);
46    };
47
48    // 기본 옵션
49    CreateMap.DEFAULTS = {
50        level: 3,
51        draggable: true,
52        zoomable: true,
53        typecontrol: false,
54        markers: [] // 마커 정보를 담을 배열
55    };
56
57    // 초기화 함수
58    CreateMap.prototype.init = function (element, options) {
59        this.element = $(element);
60        this.options = options;
61        this.addMap();
62    };
63
64    // 지도 생성 및 마커 추가 함수
65    CreateMap.prototype.addMap = function () {
66        var $this = this.element;
67        var mapContainer = this.element[0];
68
69        // 지도 중심 설정
70        var lat = parseFloat($this.data('lat'));
71        var lng = parseFloat($this.data('lng'));
72
73        // 지도 옵션
74        var mapOption = {
75            center: new kakao.maps.LatLng(lat, lng),
76            level: this.options.level
77        };
78
79        var map = new kakao.maps.Map(mapContainer, mapOption);
80
81        map.setDraggable(this.options.draggable);
82        map.setZoomable(this.options.zoomable);
83
84        if (this.options.typecontrol) {
85            var mapTypeControl = new kakao.maps.MapTypeControl();
86            map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
87
88            var zoomControl = new kakao.maps.ZoomControl();
89            map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
90        }
91
92        this.addMarkers(map, lat, lng);  // 마커 추가
93    };
94
95    // 마커 추가 함수
96    CreateMap.prototype.addMarkers = function (map, centerLat, centerLng) {
97        var $this = this.element;
98        var markers = [];
99
100        // 다중 마커일 경우
101        if ($this.data('mk1-lat')) {
102            var i = 1;
103            // 다중 마커가 있을 경우, data-mk1-lat, data-mk1-lng 등으로 반복하면서 마커 추가
104            while ($this.data('mk' + i + '-lat')) {
105                var lat = parseFloat($this.data('mk' + i + '-lat'));
106                var lng = parseFloat($this.data('mk' + i + '-lng'));
107                var title = $this.data('mk' + i + '-title');
108                var info = $this.data('mk' + i + '-info');
109
110                markers.push({ lat: lat, lng: lng, title: title, info: info });
111                i++;
112            }
113        }
114
115        // 다중 마커가 아닌 경우
116        else {
117            // 하나의 마커일 경우, 기본 지도 속성 (lat, lng, title, info)
118            markers.push({
119                lat: centerLat,
120                lng: centerLng,
121                title: $this.data('title'),
122                info: $this.data('info')
123            });
124        }
125
126        // 마커들에 대해 반복문을 돌며 추가
127        for (var j = 0; j < markers.length; j++) {
128            var markerInfo = markers[j];
129            var markerPosition = new kakao.maps.LatLng(markerInfo.lat, markerInfo.lng);
130
131            var imageSrc = '/pcms/common/images/marker.png',
132                imageSize = new kakao.maps.Size(29, 42),
133                imageOption = { offset: new kakao.maps.Point(13, 42) };
134
135            var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
136
137            var marker = new kakao.maps.Marker({
138                position: markerPosition,
139                image: markerImage
140            });
141
142            marker.setMap(map);
143
144            if (markerInfo.title || markerInfo.info) {
145                var customOverlay = new kakao.maps.CustomOverlay({
146                    position: markerPosition
147                });
148
149                var content = document.createElement('div');
150                content.className = "ui-map-info";
151
152                if (markerInfo.title) {
153                    var title = document.createElement('div');
154                    title.className = "ui-map-info__title";
155                    title.appendChild(document.createTextNode(markerInfo.title));
156                    content.appendChild(title);
157                }
158
159                if (markerInfo.info) {
160                    var info = document.createElement('div');
161                    info.className = "ui-map-info__content";
162                    info.appendChild(document.createTextNode(markerInfo.info));
163                    content.appendChild(info);
164                }
165
166                customOverlay.setContent(content);

167                customOverlay.setMap(map);
168            }
169        }
170
171        // 다중 마커일 경우, 지도 중심은 첫 번째 마커의 위치로 설정
172        if (markers.length > 0) {
173            var firstMarker = markers[0];
174            var newCenter = new kakao.maps.LatLng(firstMarker.lat, firstMarker.lng);
175            map.setCenter(newCenter);  // 지도 중심 이동
176        }
177    };
178
179    // 플러그인 초기화 및 마커 추가 함수
180    function checkMapPlugin(option) {
181        var $this = $(this);
182        var data = $this.data('map');
183        var options = $.extend({}, CreateMap.DEFAULTS, $this.data(), typeof option === 'object' && option);
184
185        if ($this.is('[data-map="map"]')) {
186            $this.data('map', (data = new CreateMap(this, options)));
187            if (typeof option === 'string') data[option]();
188        }
189    }
190    $.fn.checkMap = checkMapPlugin;
191    $(window).on("load", function () {
192        $("[data-map=\"map\"]").each(function () {
193            var $this = $(this);
194            var option = $this.data();
195            checkMapPlugin.call($this, option);
196        });
197    });
198});
199
200
201}