[kakao map api] 카카오맵 2개 로드시 맵이 정상적으로 로드되지않는 현상

by 한국인맛집 2023. 4. 19. 16:17

2개의 화면에 카카오 맵을로드하고, 2개의탭으로 화면 구성을 해야할때가 있다.

그럴때 보여지는 지도는 잘보이나

숨겨졌다가 보여지는 [display : none] 옵션을 준 맵은 보여지지않는데 이것을 해결하는것은 매우 간단하다고 한다.

맵을 불러온 지점에서

map.relayout() // 맵을 리레이아웃( 다시불러오기)
map.setCenter(new daum.maps.LatLng('경도', '위도')) // 카메라를 센터로 하는 함수

2개의 함수를 불러주면 해결된다.

전체적인 코드는 다음과 같다.

HTML 앞단 부분

<html>
	<head>
    </head>

	<body>
    
	<div class="container-fluid">
    	<div class="row">
            <div class="top-menu">
                <div id="main-tab" class="tab-view btn-tab active">탭1</div>
                <div id="lab-tab" class="tab-view btn-tab ">탭2</div>
            </div>


            <div id="main" class="container-fluid">
                    <div class="col-12">
                        <div id="map" style="width:100%;height:100%;" class="container-fluid"></div>
					</div>
            </div>


            <div id="lab" class="container-fluid" style="display: none" >
                <div class="col-12">
                    <div id="map1" style="width:100%;height:100%;" class="container-fluid"></div>
                </div>
            </div>
         </div>
     </div>
 	</body>
 </html>

jquery

<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=당신의_APP_KEY"></script>

<script>
    $(document).ready(function(){

        var maps = document.getElementById('map'), // 지도를 표시할 div
        option = {
            center: new kakao.maps.LatLng(36, 127), // 지도의 중심좌표
            level: 4, // 지도의 확대 레벨
            mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
        };

        // 지도를 생성한다
        var map = new kakao.maps.Map(maps, option);

        // 지도에 마커를 생성하고 표시한다
        var marker = new kakao.maps.Marker({
            position: new kakao.maps.LatLng(36, 127), // 마커의 좌표
            map: map // 마커를 표시할 지도 객체
        });

        var maps1 = document.getElementById('map1'), // 지도를 표시할 div
            option1 = {
                center: new kakao.maps.LatLng(36.387, 127.373), // 지도의 중심좌표
                level: 4, // 지도의 확대 레벨
                mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
            };

        // 지도를 생성한다
        var map1 = new kakao.maps.Map(maps1, option1);

        // 지도에 마커를 생성하고 표시한다
         var marker1 = new kakao.maps.Marker({
             position: new kakao.maps.LatLng(36.387, 127.37), // 마커의 좌표
             map: map1 // 마커를 표시할 지도 객체
         });


		// 메인탭을 클릭했을때 map 지도보여주기
        $('#main-tab').on('click',function(){

            if($(this).hasClass('active') != true){

                $('#main-tab').addClass('active');
                $('#lab-tab').removeClass('active');
                $('#main').css('display','block');
                $('#lab').css('display','none');

                map.relayout();

            }
        });
		
        // 랩탭을 클릭했을때 map1 지도보여주기
        $('#lab-tab').on('click',function(){
            if($(this).hasClass('active') != true){

                $('#main-tab').removeClass('active');
                $('#lab-tab').addClass('active');
                $('#main').css('display','none');
                $('#lab').css('display','block');

                map1.relayout();
                map1.setCenter(new daum.maps.LatLng(36.387, 127.373))


            }
        });
    });

</script>

이분 코드를 참고 했습니다.

https://www.youtube.com/watch?v=vuBnvsoeWck

저작자표시 비영리 변경금지

'개발생활 > JavaScript' 카테고리의 다른 글

jsdoc 사용법 How to use jsdoc [Windows] (0)	2021.07.20
how to get Button id in JavaScript ? (0)	2019.01.03
how to style property change in js ? (0)	2019.01.03
how to use Iframe / change src in iframe? (0)	2019.01.03
how to button property disable change in javascript or jqury (0)	2018.12.27
javascript current time (0)	2018.12.27