[Tip] tab(탭)에 카카오맵 api 지도 여러개 넣기

[Tip] tab(탭)에 카카오맵 api 지도 여러개 넣기

부트스트랩 탭에 지도(카카오맵 api)를 여러개 넣어야하는 작업이 있었는데, 

하나 넣었던 때처럼 단순히 넣으면 제대로 구현되겠다고 생각했는데 막상 해보니 

생각처럼 단순한 게 아니었습니다.

열심히 삽질을 하고 구글링을 반복하던 끝에 다행히 구현할 수 있었는데,

먼저 하나씩 단계를 밟아가며 설명 드리겠습니다.

 부트스트랩 탭을 세팅합니다. 

 (제가 구현한 탭은 총 4가지입니다.)

<div class="tab">
	<ul class="nav nav-tabs" role="tablist" id="myTab">
		<li role="presentation" class="active"><a href="#place1" aria-controls="place1" role="tab" data-toggle="tab">장소1</a></li>
		<li role="presentation"><a href="#place2" aria-controls="place2" role="tab" data-toggle="tab">장소2</a></li>
		<li role="presentation"><a href="#place3" aria-controls="place3" role="tab" data-toggle="tab">장소3</a></li>
		<li role="presentation"><a href="#place4" aria-controls="place4" role="tab" data-toggle="tab">장소4</a></li>
	</ul>
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="place1">
		<!--장소 1 지도가 들어갈 자리-->
		</div>
		<div role="tabpanel" class="tab-pane" id="place2">
		<!--장소 2 지도가 들어갈 자리-->
		</div>
		<div role="tabpanel" class="tab-pane" id="place3">
		<!--장소 3 지도가 들어갈 자리-->
		</div>
		<div role="tabpanel" class="tab-pane" id="place4">
		<!--장소 4 지도가 들어갈 자리-->
		</div>
	</div>
</div>

ul.nav-tabs에 있는 li > a의 href, aria-controls와  .tabpanel의 id값의 이름을 같게 맞춰줍니다.

그리고 카카오 개발자 센터에서 카카오맵 api(http://apis.map.kakao.com/)에서

생성한 키를 가져오는데, 

(가져오는 방법은 URL 참고 : http://apis.map.kakao.com/web/guide/#ready)

주석 처리한 공간에 지도를 담을 영역을 만들어줍니다.

<div class="tab-content">
	<div role="tabpanel" class="tab-pane active" id="place1">
	<div class="map" id="map1"></div>
	</div>
	<div role="tabpanel" class="tab-pane" id="place2">
	<div class="map" id="map2"></div>
	</div>
	<div role="tabpanel" class="tab-pane" id="place3">
	<div class="map" id="map3"></div>
	</div>
	<div role="tabpanel" class="tab-pane" id="place4">
	<div class="map" id="map4"></div>
	</div>
</div>

그리고 각각의 script에 아래 내용을 넣어줍니다.

(원하는 위치의 위도, 경도를 모를 경우는 https://support.google.com/maps/answer/18539?co=GENIE.Platform%3DDesktop&hl=ko , 

해당 URL에서 장소의 좌표 구하기의 내용을 참고하세요)

/* place1의 지도 */

var mapContainer1 = document.getElementById('map1'),
    mapOption1 = {  
        center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
        level: 3
    };
var map1 = new kakao.maps.Map(mapContainer1, mapOption1);
var markerPosition1  = new kakao.maps.LatLng(원하는 위치의 위도, 경도); 
var marker1 = new kakao.maps.Marker({
    position: markerPosition1
});
marker1.setMap(map1);

/* place2의 지도 */
    
var mapContainer2 = document.getElementById('map2'),
    mapOption2 = { 
        center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
        level: 3
    };
var map2 = new kakao.maps.Map(mapContainer2, mapOption2);
var markerPosition2  = new kakao.maps.LatLng(원하는 위치의 위도, 경도); 
var marker2 = new kakao.maps.Marker({
    position: markerPosition2
});
marker2.setMap(map2);

/* place3의 지도 */

var mapContainer3 = document.getElementById('map3'),
    mapOption3 = { 
        center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
        level: 3
    };
var map3 = new kakao.maps.Map(mapContainer3, mapOption3);
var markerPosition3  = new kakao.maps.LatLng(원하는 위치의 위도, 경도); 
var marker3 = new kakao.maps.Marker({
    position: markerPosition3
});
marker3.setMap(map3);

/* place4의 지도 */

var mapContainer4 = document.getElementById('map4'),
    mapOption4 = { 
        center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
        level: 3
    };
var map4 = new kakao.maps.Map(mapContainer4, mapOption4);
var markerPosition4  = new kakao.maps.LatLng(원하는 위치의 위도, 경도); 
var marker4 = new kakao.maps.Marker({
    position: markerPosition4
});
marker4.setMap(map4);

이렇게 하고 완료! 하면 좋았겠지만 여기까지 하고 나면

탭을 이동시킬 때마다 위치를 표시해주는 마커가

사라지는 현상이 자꾸 발생됩니다. 

그럴 때는 당황하지 말고

아래 소스를 추가해서 넣어주세요.

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show');
  setTimeout(function(){
	  map2.relayout();
	  map2.setCenter(new daum.maps.LatLng(두번째 탭 지도 위치와 경도));
	  map3.relayout();
	  map3.setCenter(new daum.maps.LatLng(세번째 탭 지도 위치와 경도));
	  map4.relayout();
	  map4.setCenter(new daum.maps.LatLng(네번째 탭 지도 위치와 경도));
	}, 0);  
});

* 참고 사이트 :

https://devtalk.kakao.com/t/topic/57949

https://brunch.co.kr/@ourlove/79