카카오 지도 WEB API : setBounds(bounds) 내부 영역 범위 조정하기

setBounds() Padding

Kakao Maps API : setBounds로 지도 범위 재설정시 내부 영역 미세조정하기

이번 포스트는 지도에 표시되는 다수의 마커를 고려하여 지도 범위를 재 설정해주는

setBounds() 메서드 사용시 Padding 값을 사용하여 표시하는 지도 범위를 조정

하는 법에 대해 소개합니다.

 

사전 참고사항

범위 재설정 하기

setBounds()를 사용하여 지도를 보여주는 범위를 재설정 하는 방법은 이전 포스트 또는 공식 가이드를 참고해주세요.

카카오 지도 API 기본 사용법 : 지도 범위 설정

카카오 지도 WEB API : 지도 그리기, 마커 표시, 지도 범위 설정 등 기본 사용법 정리

 

setBounds() 에 Padding 값 설정

문제점

지도에 표시된 마커를 모두 포함하는 범위를 보여주기 위해 map.setBounds(bounds) 메서드를 사용하면 간단하게 구현이 가능하지만, 마커위에 인포윈도우 또는 오버레이를 사용하는 경우 표시하는 블록이 화면에 잘리는 것 처럼 보일 수 있습니다. 아래 그램의 두개 지도는 동일하게 서울역, 대전역, 대구역, 부산역을 표시하는 지도이지만, 왼쪽 지도는 서울역의 마커는 표시되어 있으나 마커 정보를 표시하는 오버레이는 잘려있는 형태입니다. 

(왼) 원하지 않는 지도 범위, (오) 원하는 지도 범위

※ 위 지도와 같은 스타일은 아래의 링크에서 쉽게 미리보기 후 생성할 수 있습니다.

카카오 지도 생성기 - 여러개 마커 표시

카카오 지도 생성기 WEB API : 여러 개 마커가 있는 지도 생성, 확인 후 임베드 하기 - 여행 경로 용

 

문제점 해결하기

위와 같은 문제를 해결하기 위해서 setBounds() 메서드의 파라미터에 Padding 값을 설정 할 수 있습니다. 카카오 지도 API 공식 문서를 보면 setBounds() 메서드는 아래와 같이 사용 가능합니다.

Map.setBounds()

• map.setBounds(bounds);
• map.setBounds(bounds, paddingTop, paddingRight, paddingBottom, paddingLeft)

아래 그림은 같은 setBounds 메서드를 사용하면서 Padding값에 따른 결과 차이입니다. 생성된 오버레이나 인포윈도우에 따라 패딩값은 조정되어야 합니다.

• 왼쪽 : map.setBounds(bounds) 로 지도 범위 재설정
• 오른쪽 : map.setBounds(bounds, 90, 30, 10, 30) 로 지도 범위 재 설정

(왼) map.setBounds(bounds), (오) map.setBounds(bounds, 90, 30, 10, 30)

참고로 우측 지도의 생성 샘플 코드는 아래와 같습니다. 

<div id="mapwrap" style="overflow:hidden;"><div id="map" style="position:relative; width: 100%; height: 350px;"><p class="btn-init" onclick="setBounds()" style="position: absolute;right: 7px;bottom: 7px; color: #666666;z-index: 10;font-size: 12px;font-weight: bold;background: white;box-shadow: 1px 1px 1px 1px #AAAAAA;padding: 0px 7px;border-radius: 4px;cursor: pointer;">초기화면으로</p></div><div style="width: 100%;background-color: #CCCCCC;"><p style="text-align: right;margin-top: 0px;"><a href="https://juahnpop.tistory.com/255" target="_blank" style="color: #751278;font-size: 14px;font-weight: bold;padding-right: 8px;">👉 Get Custom KakaoMap Code -&gt; Click</a></p></div></div>
<script>
    var inputData = ['제주공항', '협재 해수욕장', '서귀포', '제주도 에코랜드']
    var mapContainer = document.getElementById('map'),
        mapOption = {
            center: new kakao.maps.LatLng(37.54699, 127.09598),
            level: 3
        };
    var map = new kakao.maps.Map(mapContainer, mapOption);
    var count = 0;
    var ps = new kakao.maps.services.Places();
    var bounds = new kakao.maps.LatLngBounds();
    var mapTypeControl = new kakao.maps.MapTypeControl();
    map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
    var imageSrc =
        "https://tistory2.daumcdn.net/tistory/3056305/skin/images/map-marker-red.png",
        imageSize = new kakao.maps.Size(35, 35),
        imageOption = {
            offset: new kakao.maps.Point(17, 40)
        };
    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption)
    if (inputData != null) {
        kewwordSearch(inputData[count]);
    }

    function kewwordSearch(keword) {
        ps.keywordSearch(keword, placesSearchCB);
        count = count + 1;
    }

    function placesSearchCB(data, status, pagination) {
        if (status === kakao.maps.services.Status.OK) {
            displayMarker(data[0]);
            bounds.extend(new kakao.maps.LatLng(data[0].y, data[0].x));
            if (count < inputData.length) {
                kewwordSearch(inputData[count])
            } else if (count == inputData.length) {
                setBounds();
                applyStyle();
            }
        }
    }

    function displayMarker(place) {
        var marker = new kakao.maps.Marker({
            map: map,
            position: new kakao.maps.LatLng(place.y, place.x),
            image: markerImage
        });
        kakao.maps.event.addListener(marker, 'click', function () {
            var position = this.getPosition();
            var url = 'https://map.kakao.com/link/map/' + place.id;
            window.open(url, '_blank');
        });
        var content =
            '<div class="customoverlay" style="position: relative;bottom: 76px;border-radius: 6px;border: 1px solid #ccc;border-bottom: 2px solid #ddd;float: left;">' +
            ' <a href="https://map.kakao.com/link/map/' + place.id + '"' +
            ' target="_blank" style="display: block;text-decoration: none;color: #666666;text-align: center;border-radius: 6px;font-size: 14px;font-weight: bold;overflow: hidden;background: #d95050;background: #d95050 url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;">' +
            ' <span class="title" style="display: block;text-align: center;background: #fff;margin-right: 35px;padding: 8px 10px;font-size: 13px;font-weight: bold;">' +
            count + '. ' + place.place_name + '</span>' +
            ' </a>' +
            '</div>';
        var customOverlay = new kakao.maps.CustomOverlay({
            map: map,
            position: new kakao.maps.LatLng(place.y, place.x),
            content: content,
            yAnchor: 0.11
        });
    }

    function setBounds() {
        map.setBounds(bounds, 90, 30, 10, 30);
    }
</script>

끝까지 읽어 주셔서 감사합니다.^^

관련포스트

🤞 카카오맵 API 관련글 목록 보기

🤞 카카오맵 생성기 목록 보기