click.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>카카오 지도 클릭 예제</title>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=0093745d6e4797bd4c103fb856dd5b68"></script>
</head>
<body>
    <div id="map" style="width: 1000px; height: 1000px;"></div>

    <script>
        var mapContainer = document.getElementById('map');
        var options = {
            center: new kakao.maps.LatLng(36.32843, 126.5099), // 기본 지도 중심 좌표
            level: 3 // 기본 지도 확대 레벨
        };

        var map = new kakao.maps.Map(mapContainer, options);
        var markers = []; // 마커 배열

        kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
            var latlng = mouseEvent.latLng;
            var lat = latlng.getLat();
            var lng = latlng.getLng();

            var marker = new kakao.maps.Marker({
                position: latlng
            });

            marker.setMap(map);
            markers.push(marker);

            alert('클릭한 위치 - 위도: ' + lat + ', 경도: ' + lng);

            // 서버로 좌표 데이터 전송
            fetch('/save-coordinates', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ lat, lng })
            });
        });
    </script>
</body>
</html>