봉사활동 카카오톡api

카카오톡 api

<input type="text" class="form-control col-6" name="volPlace" id="sample5_address" placeholder="봉사활동장소"
    style="display: inline;margin-bottom: 15px;" required>
<input type="button" class="btn btn-outline-success" onclick="sample5_execDaumPostcode()" value="주소 검색"
    style="margin-bottom:5px;margin-left: 5px;">
<br>
<div id="map" style="width:300px;height:300px;margin-top:10px;display:block"></div>

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)
        }
    });
}
}).open();
}
//다음 지도 api
// 지도를 표시할 div와 옵션을 설정합니다.
var mapContainer = document.getElementById('map'),
    mapOption = {
        center: new daum.maps.LatLng(37.566535, 126.97796919999996), // 지도의 중심좌표
        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
});