<div class="tab_conts">
<p class="map_address"><span class="addr">주소 : 경기 용인시 수지구 손곡로 111</span>
<span class="post"><span>지번</span> 동천동 946-9</span></p>
<div id="map">
<div>
</div>
스크립트
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커가 표시될 위치입니다
var markerPosition = new daum.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new daum.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
스타일 변경이 끝난 시점이라 함은,
지도 생성은 이미 되어 있다고 가정하고
지도 엘리먼트 혹은 그 엘리먼트에 영향을 주는 요소의
width/height 변경 혹은 숨김/보임(e.g display: none) 처리가 된 이후를 뜻합니다.
사용자가 직접 map.relayout()을 호출해야 하는 이유 :
지도를 생성할 때 지도가 보여질 영역의 엘리먼트를 필수적으로 넘겨주게 되어 있는데
var mapContainer = document.getElementById('map'), // <= 바로 이 엘리먼트
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(mapContainer, mapOption);
이 때 해당 엘리먼트의 width/height를 체크하여 표출해야 할 타일 영역을 계산합니다.
이렇게 인식한 width/height값은 (특별한 일이 없다면) 지도 내부에 값으로 지정되며 매 계산마다 해당 값을 참조하게 됩니다.
그 이후에 사용자가 외부에서 지도 엘리먼트의 크기를 변경하게 되면
지도 내부에서는 엘리먼트의 값이 변경된 시점을 감지할 수 있는 좋은 방법이 없기 때문에
(방법은 있지만 성능적으로 비효율적입니다.)
타일이 전부 화면에 보이지 않거나 타일 하나만 보이는 현상이 나타납니다.
결국 사용자가 지도 영역의 엘리먼트 width/height를 필요에 의해 변경한다면
내부에 지정된 값을 갱신하고 지도 영역을 재계산 해 주기 위해서 map.relayout()을 직접 호출해 주어야 합니다.