<div class="rb_inp_wrap new_bbs_border_wrap section" id="section_3" style="display:none;">

        <ul>

            <h6 class="bbs_sub_titles font-B">근무지역</h6>

            <label class="helps">근무지역을 입력하세요. 지도로 출력 됩니다.</label>

            <li>

                <input type="text" name="wr_3_ex[0]" value="<?php echo isset($wr_3[0]) ? $wr_3[0] : ''; ?>" id="wr_3_0" class="input w60 map_inp" placeholder="주소" readonly>

                <input type="text" name="wr_3_ex[1]" value="<?php echo isset($wr_3[1]) ? $wr_3[1] : ''; ?>" id="wr_3_1" class="input w30 mobile_mt5" placeholder="나머지 주소">

            </li>

            <li class="mt-10">

                <input type="text" name="wr_9" value="<?php echo isset($write['wr_9']) ? $write['wr_9'] : ''; ?>" id="wr_9" class="input w20" placeholder="광역시/도">

                <input type="text" name="wr_10" value="<?php echo isset($write['wr_10']) ? $write['wr_10'] : ''; ?>" id="wr_10" class="input w20 mobile_mt5" placeholder="시/군/구">

                <input type="hidden" name="wr_3_ex[2]" value="-" id="wr_3_2">

                <input type="hidden" name="wr_3_ex[3]" value="-" id="wr_3_3">

                <input type="hidden" name="wr_3_ex[4]" value="<?php echo isset($wr_3[4]) ? $wr_3[4] : ''; ?>" id="wr_3_4">

                <input type="hidden" name="wr_3_ex[5]" value="<?php echo isset($wr_3[5]) ? $wr_3[5] : ''; ?>" id="wr_3_5">

            </li>

            <li class="mt-10">

                <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?php echo $config['cf_kakao_js_apikey'] ?>&libraries=services"></script>

                <div style="background-color:#f9f9f9; width:100%; height:200px; border-radius:10px;" id="map"></div>

                <script>

                var mapContainer = document.getElementById('map'),

                    mapOption = {

                        center: new kakao.maps.LatLng(<?php echo $wr_3[4] ?>, <?php echo $wr_3[5] ?>),

                        level: 3

                    };

                var map = new kakao.maps.Map(mapContainer, mapOption);

                var geocoder = new kakao.maps.services.Geocoder();

                var marker = new kakao.maps.Marker({

                    map: map,

                    position: map.getCenter(),

                    draggable: true

                });

                // 마커 드래그 이벤트 처리

                kakao.maps.event.addListener(marker, 'dragend', function() {

                    var position = marker.getPosition();

                    updateLocationInfo(position);

                });

                // 마커 클릭 이벤트 처리

                kakao.maps.event.addListener(marker, 'click', function() {

                    var position = marker.getPosition();

                    updateLocationInfo(position);

                });

                // 지도 클릭 이벤트 처리

                kakao.maps.event.addListener(map, 'click', function(mouseEvent) {

                    var latlng = mouseEvent.latLng;

                    marker.setPosition(latlng);

                    updateLocationInfo(latlng);

                });

                // 위치 정보를 업데이트하는 함수

                function updateLocationInfo(latlng) {

                    geocoder.coord2Address(latlng.getLng(), latlng.getLat(), function(result, status) {

                        if (status === kakao.maps.services.Status.OK) {

                            var detailAddr = !!result[0].road_address ? result[0].road_address.address_name : result[0].address.address_name;

                            document.getElementById('wr_3_0').value = detailAddr;

                            document.getElementById('wr_9').value = result[0].address.region_1depth_name;

                            document.getElementById('wr_10').value = result[0].address.region_2depth_name;

                        }

                    });

                }

                // 주소 입력란을 클릭하면 다음 주소 API 사용

                $(function() {

                    $("#wr_3_0").on("click", function() {

                        new daum.Postcode({

                            oncomplete: function(data) {

                                $("#wr_3_0").val(data.address);

                                $("#wr_9").val(data.sido);

                                $("#wr_10").val(data.sigungu);

                                geocoder.addressSearch(data.address, function(results, status) {

                                    if (status === kakao.maps.services.Status.OK) {

                                        var result = results[0];

                                        var coords = new kakao.maps.LatLng(result.y, result.x);

                                        map.relayout();

                                        map.setCenter(coords);

                                        document.getElementById('wr_3_4').value = coords.getLat();

                                        document.getElementById('wr_3_5').value = coords.getLng();

                                        marker.setPosition(coords);

                                    }

                                });

                            }

                        }).open();

                    });

                });

                // 지도가 리사이즈될 때 재정렬

                $(window).on('resize', function () {

                    map.relayout();

                    map.setCenter(marker.getPosition());

                });

                </script>

            </li>

        </ul>

    </div>

별건 아니지만

지도위치에서 마크 포인트가 사라지면 곤란하실 분이 있을것같아서

드래그도 가능하지만 지도를 터치만해도 나오도록 설정했습니다!

• 페이스북 공유
• 트위터 공유
•