<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %><section class="sub">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<head>
    <meta charset="utf-8">
    <script src="/publish/js/jquery-3.5.0.js"></script>
    <title>클릭한 위치에 마커 표시하기</title>
    
</head>
<body>
<div class="content"><!-- heading(공통) -->
<div class="heading"></div>

<div class="subCont">
<div class="mapWrap">
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=07d7ecaf764d1a53f41cc3f27134256e&libraries=services"></script>
<input type="text" id="sample5_address" placeholder="주소">
<input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br>
<button type="button" onclick="insertajax();">전송</button>
<div id="map" style="width:1200px;height:450px;">&nbsp;</div>

<div class="mapInfo">
	문자전송 화면에 추가되는 영역<input type="text" id="testarea" value="" style="width:600px;height:200px;"/>
	ajax로 받아온 url	<input type="text" id="urlarea" value="" style="width:600px;height:200px;"/>
</div>
</div>

</div>
</div>
<script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
            level: 5 // 지도의 확대 레벨
        };

    //지도를 미리 생성
    var map = new daum.maps.Map(mapContainer, mapOption);
    //주소-좌표 변환 객체를 생성
    var geocoder = new daum.maps.services.Geocoder();
    //마커를 미리 생성
    var marker = new daum.maps.Marker({
        position: new daum.maps.LatLng(37.537187, 127.005476),
        map: map
    });

	//lat 위도 lng 경도
    var paramLat;
    var paramLng;
    
    function sample5_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                var addr = data.address; // 최종 주소 변수

                // 주소 정보를 해당 필드에 넣는다.
                document.getElementById("sample5_address").value = addr;
                // 주소로 상세 정보를 검색
                geocoder.addressSearch(data.address, function(results, status) {
                    // 정상적으로 검색이 완료됐으면
                    if (status === daum.maps.services.Status.OK) {

                        var result = results[0]; //첫번째 결과의 값을 활용

                        // 해당 주소에 대한 좌표를 받아서
                        var coords = new daum.maps.LatLng(result.y, result.x);
                        // 지도를 보여준다.
                        mapContainer.style.display = "block";
                        map.relayout();
                        // 지도 중심을 변경한다.
                        map.setCenter(coords);
                        // 마커를 결과값으로 받은 위치로 옮긴다.
                        marker.setPosition(coords)
                        paramLat = result.y;
                        paramLng = result.x;
                        
                    }
                });
            }
        }).open({
        	q: document.getElementById("sample5_address").value
        });
    }
    
    function insertajax(){
    	
    	$.ajax({
            cache : false,
            url : "<c:url value='/MapUrlInsertAjax.do' />", 
            type : 'POST', 
            data : {
            	"mapLat" : paramLat,
            	"mapLng" : paramLng
            },
            dataType:'json',
            success : function(returnData, status){
    			if(status == "success") {
    				if (returnData.url != 0) {
    					document.getElementById("testarea").value = returnData.url + "/MapUrl.do?seq=" + returnData.seq;
    				}
    			}else{ alert("ERROR!");return;} 
    		},
    
            error : function(request , status, error){
    			alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
            }
        });
    } 
</script>

</body>