https://kbrainc.com/weven_service/asset/js/bm2/com/toolbtn/ToolBtnMap.js

1/**
2 * created by WEVEN on 2020-03-02
3 * 아래의 소스는 WEVEN에 저작권이 있으므로 무단 사용 및 재 배포를 금합니다.
4 */
5var ToolBtnMap = function() {
6
7    var _this = this;
8    this.type = "ToolBtnMap";
9    this.mapInfo;
10    this.fitHeight = 500;
11    this.naverKeyApplyUrl = ['weven', 'zgai', 'zaemit']
12
13    this.onBtnClick = function(e, prop) {
14        switch(prop) {
15            case "google":
16                // AIzaSyB6l7Grg8KC8QUABO7hIVEbm6jph3szDL0
17                $(_this.btnList['key']).val("AIzaSyB6l7Grg8KC8QUABO7hIVEbm6jph3szDL0");
18                break;
19            case "kakao":
20                // b662fb55b64f2c0800f7198337881ab7
21                $(_this.btnList['key']).val("1984ddaf3d57dbd6dde2bf008f2c6754"); // 카카오 api key 중 javascript 키
22                break;
23            case "naver":
24                // 기존 Client ID : zjzr9mcpa6
25                // 새 Client ID : 6auw87rh29
26                var href = location.href;
27                var isNaverKeyUse = false;
28                this.naverKeyApplyUrl.forEach((item)=>{
29                    if(href.indexOf(item) > -1) isNaverKeyUse = true;
30                })
31                if(isNaverKeyUse){
32                    $(_this.btnList['key']).val("6auw87rh29");
33                }else{
34                    $(_this.btnList['key']).val("");
35                }
36                break;
37            case "apply":
38                this.applyMap();
39                break;
40        }
41    }
42
43    var btnList = {
44        key: $('[data-wv-tool-btn-prop="key"]')[0],
45        height: $('[data-wv-tool-btn-prop="height"]')[0],
46        address: $('[data-wv-tool-btn-prop="address"]')[0],
47        google: $('[data-wv-tool-btn-prop="google"]')[0],
48        kakao: $('[data-wv-tool-btn-prop="kakao"]')[0],
49        naver: $('[data-wv-tool-btn-prop="naver"]')[0]
50    };
51
52    $(btnList["key"]).on("keydown", function(e) {
53        if (e.keyCode === 13) { // 엔터 키
54            var key = $(this).val().trim(); // 공백 제거
55            if (!key) {
56                bm.toast(systemLangPack.getMessage('SLSATTB0132')); //API Key를 입력해주세요.
57                $(this).focus();
58                e.preventDefault(); // 엔터 키의 기본 동작을 막기 위해
59                return;
60            }
61        }
62    });
63
64    this.applyMap = function(height) {
65        // API KEY 입력
66        var key = this.btnList["key"].value;
67        if(!key) {
68            bm.toast(systemLangPack.getMessage('SLSATTB0132')); //API Key를 입력해주세요.
69            $(this.btnList["key"]).focus();
70            return;
71        }
72        // 높이 확인
73        let byHeightChange;
74        if(height) byHeightChange = true;
75        else byHeightChange = false;
76        var h = height ? height : parseFloat(bm.getStyle(this.target, 'height'));
77        // 주소 입력 확인
78        var address = this.btnList["address"].value;
79        if(!address) {
80            bm.toast(systemLangPack.getMessage('ALEE0045')); //주소를 입력해주세요.
81            $(this.btnList["address"]).focus();
82            return;
83        }
84        // 지도 정보 설정
85        this.mapInfo = {
86            type: $(this.btnList["google"]).is(":checked") ? "google" : $(this.btnList["kakao"]).is(":checked") ? "kakao" : "naver",
87            key: key, height: h, address: address
88        };
89        this.initMap(byHeightChange);
90        bm.toolManager.kitReposition();
91    }
92
93    // 맵관련 api 초기화
94    this.initMap = function(byHeightChange) {
95        var oldDocumentWrite = document.write;
96        document.write = function(node) {
97            $("body").append(node);
98        }
99        if(this.mapInfo.type == "google") {
100            $.ajax({

101                url: WEB_ROOT + 'geocode/gl',
102                data: {
103                    address: _this.mapInfo.address
104                },
105                cache: false,
106                type: 'GET',
107                async: false,
108                dataType: "json"
109            }).done(function(data) {
110                if(data.status == "OK") {
111                    var info = data.results;
112                    var locationAddress = info[0].formatted_address;
113                    if(locationAddress) {
114                        _this.mapInfo.address = locationAddress;
115                        _this.mapInfo.lat = info[0].geometry.location.lat;
116                        _this.mapInfo.lng = info[0].geometry.location.lng;
117                        $(_this.target).closest('[data-wv-layout-element="block"]').attr('data-wv-layout-element-type', 'map').attr('data-wv-layout-element-param', JSON.stringify(_this.mapInfo).replace(/\"/g, "'"));
118                        if(typeof google === "undefined") {
119                            $.getScript("https://maps.googleapis.com/maps/api/js?key=" + _this.mapInfo.key, function() {
120                                setTimeout(function() {
121                                    document.write = oldDocumentWrite;
122                                    _this.setMap(_this.target, _this.mapInfo.type, byHeightChange);
123                                }, 100);
124                            });
125                        } else {
126                            _this.setMap(_this.target, _this.mapInfo.type, byHeightChange);
127                        }
128                    }
129                }else if(data.status === 'ZERO_RESULTS') {
130                    //구글에서 주소정보를 찾을 수 없습니다.<br>주소정보를 정확하게 입력해주세요.
131                    bm.toast(systemLangPack.getMessage('SLSATTB0133'));
132                }else { 
133                    bm.toast(systemLangPack.getMessage('ALEE0169')); //API KEY를 다시 확인해주세요.
134                    _this.wrongApi(_this.target, _this.mapInfo.type);
135                }
136            });
137        } else if(this.mapInfo.type == "kakao") {
138            //55663228475fd4e5662d8998beead678
139            if(typeof kakao === "undefined") {
140                $.getScript("https://dapi.kakao.com/v2/maps/sdk.js?appkey=" + _this.mapInfo.key + "&libraries=services", function() {
141                    setTimeout(function() {
142                        document.write = oldDocumentWrite;
143                        _this.getGeoCode(byHeightChange);
144                    }, 100);
145                }).fail(function() {
146                    bm.toast(systemLangPack.getMessage('ALEE0169')); //API KEY를 다시 확인해주세요.
147                    _this.wrongApi(_this.target, _this.mapInfo.type);
148                });
149            } else {
150                _this.getGeoCode(byHeightChange);
151            }
152        } else {
153            if(typeof naver === "undefined") {
154                // [hanjd-20250701] 
155                // - Naver Map API 버전이 변경됨 
156                $.getScript("https://openapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=" + _this.mapInfo.key + "&submodules=geocoder", function() {
157                    setTimeout(function() {
158                        document.write = oldDocumentWrite;
159                        _this.getGeoCode(byHeightChange);
160                    }, 100);
161                }).fail(function() {
162                    bm.toast(systemLangPack.getMessage('ALEE0169')); //API KEY를 다시 확인해주세요.
163                    _this.wrongApi(_this.target, _this.mapInfo.type);
164                });
165            } else {
166                _this.getGeoCode(byHeightChange);
167            }
168        }
169    }
170
171    // 맵 주소 좌표변환
172    this.getGeoCode = function(byHeightChange) {
173        var geocoder;
174        if(_this.mapInfo.type == "kakao") {
175            geocoder = new kakao.maps.services.Geocoder();
176            geocoder.addressSearch(_this.mapInfo.address, function(result, status) {
177                // 정상적으로 검색이 완료됐으면
178                if(status === kakao.maps.services.Status.OK) {
179                    _this.mapInfo.address = result[0].address_name;
180                    _this.mapInfo.lat = result[0].y;
181                    _this.mapInfo.lng = result[0].x;
182                    $(_this.target).closest('[data-wv-layout-element="block"]').attr('data-wv-layout-element-type', 'map').attr('data-wv-layout-element-param', JSON.stringify(_this.mapInfo).replace(/\"/g, "'"));
183                    _this.setMap(_this.target, _this.mapInfo.type, byHeightChange);
184                } else {
185                    bm.toast(systemLangPack.getMessage('SLSATTB0134')); //주소를 잘못 입력하셨습니다. 다시 확인해주세요.
186                }
187            });
188        } else if(_this.mapInfo.type == "naver") {
189
190            var param = {};
191            param.address = _this.mapInfo.address;
192            param.key = _this.mapInfo.key;
193            bm.httpSendJsonPost(WEB_ROOT+"login/getGeocode", param, function( result ){
194
195                var status = result.data.status;
196                var response = result.data;
197
198                if(status !== "OK") {
199                    delete naver;
200                    _this.wrongApi(_this.target, _this.mapInfo.type);
201                    return bm.toast(systemLangPack.getMessage('ALEE0169')); //API KEY를 다시 확인해주세요.
202                }
203                if (response.meta.totalCount === 0) {
204                    return bm.toast(systemLangPack.getMessage('SLSATTB0134')); //주소를 잘못 입력하셨습니다. 다시 확인해주세요.
205                }
206                var info = response.addresses[0];
207                _this.mapInfo.address = info.roadAddress;
208                _this.mapInfo.lat = info.y;
209                _this.mapInfo.lng = info.x;
210                $(_this.target).closest('[data-wv-layout-element="block"]').attr('data-wv-layout-element-type', 'map').attr('data-wv-layout-element-param', JSON.stringify(_this.mapInfo).replace(/\"/g, "'"));
211                _this.setMap(_this.target, _this.mapInfo.type, byHeightChange);
212            });
213        }
214    }
215
216    // 맵 설정
217    this.setMap = function(target, type, byHeightChange){
218        var _this = this;
219        var currentTarget = target;
220

221        var sampleElement = this.getSamplingElement( target );
222        var css = {color: bm.getStyle(sampleElement, "height")};
223
224        bm.toolManager.toolBtnEditBefore(this, currentTarget, HistoryType.EDITOR_MAP, css);
225        $(currentTarget).find('.wrong_api').hide();
226
227        if( $(currentTarget).hasClass("wveditor_map") == false && $(currentTarget).find(" > .wveditor_map").length > 0 ){
228            currentTarget = $(currentTarget).find(" > .wveditor_map")[0];
229        }
230
231        if($(currentTarget).find('.map_container').length == 0) {
232            $(currentTarget).append('<div class="map_container"></div>'); //style="width:100%; height: ' + this.mapInfo.height + 'px"
233            $(currentTarget).find("> img").remove();
234            css = {height : this.mapInfo.height + 'px'};
235            // this.applyStyle(css);
236        } else{
237            $(currentTarget).find('.map_container').empty();
238            $(currentTarget).find('.map_container').show();
239            css = {height : this.mapInfo.height + 'px'};
240            // this.applyStyle(css);
241            //$(currentTarget).find('.map_container').css({height: this.mapInfo.height});
242        }
243
244        if(type == 'google'){
245            var position = {lat: this.mapInfo.lat, lng: this.mapInfo.lng};
246            var map = new google.maps.Map($(currentTarget).find('.map_container')[0], {
247                center: position, //지도의 중심좌표.
248                zoom: 17 //지도의 레벨(확대, 축소 정도)
249            }); //지도 생성 및 객체 리턴
250            var marker = new google.maps.Marker({
251                position: position,
252                map: map
253            });
254        }else if(type == 'kakao'){
255            var position = new kakao.maps.LatLng(this.mapInfo.lat, this.mapInfo.lng);
256            var map = new kakao.maps.Map($(currentTarget).find('.map_container')[0], {
257                center: position, //지도의 중심좌표.
258                level: 3 //지도의 레벨(확대, 축소 정도)
259            }); //지도 생성 및 객체 리턴
260            var marker = new kakao.maps.Marker({
261                position: position
262            });
263            marker.setMap(map);
264        }else if(type == 'naver'){
265            var position = new naver.maps.LatLng(this.mapInfo.lat, this.mapInfo.lng);
266            var map = new naver.maps.Map($(currentTarget).find('.map_container')[0], {
267                center: position, //지도의 중심좌표.
268                zoom: 18 //지도의 레벨(확대, 축소 정도)
269            }); //지도 생성 및 객체 리턴
270            var marker = new naver.maps.Marker({
271                position: position,
272                map: map
273            });
274        }
275
276        if(byHeightChange !== true) {
277            bm.toast(systemLangPack.getMessage('SLSATTB0135')); //지도설정이 적용되었습니다.
278        }
279        bm.toolManager.toolBtnEditAfter(this, currentTarget, HistoryType.EDITOR_MAP, css);
280    }
281
282    this.wrongApi = function(target, type){
283        var guideList = {
284            'google' : 'https://cloud.google.com/maps-platform',
285            'kakao' : 'https://apis.map.kakao.com/web/guide/',
286            'naver' : 'https://www.ncloud.com/product/applicationService/maps'
287        };
288
289        var currentTarget;
290        if( $(target).hasClass('wveditor_map') ){ //처음 선택한 지도부터 api 오류난경우
291            currentTarget = target;
292        }else{
293            currentTarget = $(target).find('.wveditor_map');
294        }
295
296        if( $(currentTarget).find('.wrong_api').length > 0 ){
297            $(currentTarget).find('.wrong_api').show();
298            $(currentTarget).find('.wrong_api').find('.api_guide').attr('href', guideList[type]);
299        }else{
300            var wrongApiTemplate = '<div class="wrong_api" style="position: relative;padding: 30px 0px;box-sizing: border-box;"><div class="wrong_api_inner">' +
301                '<div class="title">API 키값을 받아야 이용이 가능합니다!</div>' +
302                '<div class="desc">지도를 이용하시려면 API 키값이 필요합니다.<br/>발급받은 API 키값을 입력해주세요.</div>' +
303                '<div class="btn_con"><a href="javascript:void(0)" class="btn api_guide"><span class="btn_inner">API 키값 받기</span></a>' +
304                '<a href="https://weven.kr/page/help-center?mode=view&seq=211&category=WEDITOR-MAP&parent_category=WEDITOR" class="btn"><span class="btn_inner">매뉴얼 보기</span></a></div>' +
305                '</div></div>';
306            var wrongApiCon = $(wrongApiTemplate).appendTo(currentTarget);
307            $(wrongApiCon).find('.api_guide').attr('href', guideList[type]);
308        }
309        $(currentTarget).find('.map_container').hide();
310        wvAdminIFrameBridge._WVLayoutKit.kitRepositioning();
311    }
312
313    // 맵크기 설정
314    this.setSize = function() {
315        var h = $(this.btnList["height"]).val();
316        $(_this.target).closest('[data-wv-layout-element="block"]').css({height: h + "px"});
317    }
318
319    this.applyStyle = function(css) {
320        var _this = this;
321        var targetElement = $(this.target).find('.wveditor_map .map_container');
322        var len = targetElement.length;
323
324
325        if(len == 0) { // wveditor_line가 선택된 대상에 없는 경우
326            bm.toast(systemLangPack.getMessage('SLSATTB0010')); //적용할 대상이 선택되지 않았습니다.
327            return;
328        }
329
330        var styleObj = null;
331        if( bm.bmEditorManager.registedBoardEditor === false ){
332            styleObj = WVAdminResourceManager.getEmbededStyleObject(null, _this.target);
333        }
334
335        var i, target;
336        target = targetElement;
337        var block = $(target).closest('[data-wv-layout-element="block"]');
338
339        if(css['height'] === 'fit-content') {
340            css['height'] = this.fitHeight + 'px';
341        }
342        var mapCss = css;
343        mapCss['backgroundColor'] = '#f2f2f2';
344
345        var resultSelectors = styleObj.applyResourceStyle(block, mapCss, false, true);
346
347        // 자식 map_container 엘리먼트에 적용하기
348        var childrenSelector = "[data-wv-res-id=\"" + resultSelectors[0] + "\"]" + " .map_container";
349        css['height'] = '100% !important';
350
351        styleObj.applyResourceStyle(childrenSelector, css, false, true); // child all 에 한번에 적용
352
353        // cssRules 를 CSS 태그에 반영
354        styleObj.refreshStyleElementText();
355
356    }
357
358    this.getFormatValue = function(val) {
359        if(val != 0 && val != "0" && val != "" && !isNaN(val)) {
360            val = $.trim(val);
361        } else {
362            val = "";
363        }
364        return val;
365    }
366
367}
368
369bm.extend(ToolBtnBase , ToolBtnMap);
370
371ToolBtnMap.prototype.isMapBlock = function (block) {
372    if ($(block).closest('[data-wv-layout-element="block"]').attr('data-wv-layout-element-type') == "map"
373        && $(block).closest('[data-wv-layout-element="block"]').attr('data-wv-layout-element-param')) {
374            return true;
375        }else{
376            return false;
377        }
378}
379
380ToolBtnMap.prototype.setStyleBtn = function() {
381    var _this = this;
382    if( !_this.target || _this.target.length ) {
383        _this.resetStyleBtn();
384        return false;
385    }
386
387    if(this.isMapBlock(this.target) === true) {
388        var info = $(_this.target).closest('[data-wv-layout-element="block"]').attr('data-wv-layout-element-param');
389        info = bm.parsing.parseStrToObj(info.replace(/'/g, '"'));
390        $(_this.btnList[info.type]).prop('checked', true);
391        $(_this.btnList['key']).val(info.key);
392        $(_this.btnList['height']).val(Math.round(parseFloat($(_this.target).css('height'))));
393        $(_this.btnList['address']).val(info.address);
394    }
395}
396
397ToolBtnMap.prototype.resetStyleBtn = function() {
398    if( !this.target || $(this.target).find(" > .wveditor_map").length == 0 ) return;
399}
400
401ToolBtnMap.prototype.addEvent = function() {
402    var _this = this;
403
404    $(_this.btnList["address"]).on("focusout", function() {
405        var val = $(this).val();
406        $(this).val($.trim(val));
407    });

408
409    $(_this.btnList["address"]).on("focus", function() {
410        $(this).select();
411    });
412
413    $(_this.btnList["address"]).on("keydown", function(e) {
414        if(e.keyCode == 13) {
415            _this.applyMap();
416        }
417    });
418
419    /*$(_this.btnList["width"]).on("focusout" , function() {
420        var val = _this.getFormatValue($(this).val());
421        $(this).val(val);
422        _this.setSize();
423    });*/
424
425    $(_this.btnList["height"]).on("focus" , function() {
426        var val = $(this).val();
427        if(val != 0 && val != "0" && val != "") {
428            val = parseFloat($(this).val());
429            if(isNaN(val)) val = 0;
430        }
431        $(this).val(val);
432        $(this).select();
433    });
434
435    $(_this.btnList["height"]).on("focusout" , function() {
436        var val = _this.getFormatValue($(this).val());
437        var css = {height : val + 'px'};
438        $(this).val(val);
439    });
440
441    $(_this.btnList["height"]).on("keydown", function(e) {
442        if(e.keyCode == 13) {
443            _this.applyMap();
444        }
445    });
446
447    /*$(_this.btnList["width"]).on("focus" , function() {
448        var val = $(this).val();
449        if(val != 0 && val != "0" && val != "") {
450            val = parseFloat($(this).val());
451            if(isNaN(val)) val = 0;
452        }
453        $(this).val(val);
454        $(this).select();
455    });*/
456
457}
458
459ToolBtnMap.prototype.removeEvent = function() {
460    var _this = this;
461
462    $(_this.btnList["address"]).off("focusout");
463    $(_this.btnList["address"]).off("focus");
464    $(_this.btnList["address"]).off("keydown");
465    // $(_this.btnList["width"]).off("focusout");
466    // $(_this.btnList["width"]).off("focus");
467    $(_this.btnList["height"]).off("focusout");
468    $(_this.btnList["height"]).off("focus");
469}