<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API키넣으세요&libraries=services"></script>

<div id="map"></div>

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

    // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
    var map = new kakao.maps.Map(mapContainer, mapOption);


    // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
    var  markerPosition = new kakao.maps.LatLng(37.505273, 127.023655); // 마커가 표시될 위치입니

    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        position: markerPosition
    });

    // 마커가 지도 위에 표시되도록 설정합니다
    marker.setMap(map);


    function setZoomable(zoomable) {
        // 마우스 휠로 지도 확대,축소 가능여부를 설정합니다
        map.setZoomable(zoomable);
    }
    $(window).ready(function() {
        setZoomable(false);

        $('#map').on('click',function(){
            setZoomable(true);
        });

        var mapTop = $('#map').offset().top;
        $(window).scroll(function() {
            if ($(window).scrollTop() < mapTop || $(window).scrollTop() > mapTop) {
                setZoomable(false);
            }
        });
    });




</script>