[카카오API] 카카오맵 display none->block 처리 시 지도 문제 해결법 (지도를 숨겼다가 다시 표시할때 문제점)

아래 그림처럼, [좌표등록] 버튼을 누르면 카카오맵으로 좌표 선택을 하기를 바랐다. 그치만 보이는 것처럼 지도가 잘린다.

위에 [좌표등록]을 누르면 display:none 이 block처리가 되어 보여지는 형태인데, 작성했던 제이쿼리는 아래와 같다.

$("#btn_regist").click(function () {
 if($("#div_regist").css("display") == "none")
 {
   $("#div_regist").show();
   $("#btn_regist").html("<i class='fa fa-folder-o'></i> 좌표등록 접기");
 } // if($("#div_normal").css("display") == "none")
 else
 {
   $("#div_regist").hide();
   $("#btn_regist").html("<i class='fa fa-folder-open'></i> 좌표등록");
 } // else
});

 

 

문제 해결을 위해서는 아래 코드를 써야한다.

// display: block 이 된 직 후,
window.setTimeout(function() {
    map.relayout();
}, 0);

 

따라서 내 map의 id는 map이 아니라 map_regist라서 그것만 교체하고 아래에 접목을 해보니

$("#btn_regist").click(function () {
 if($("#div_regist").css("display") == "none")
 {
   $("#div_regist").show();
   $("#btn_regist").html("<i class='fa fa-folder-o'></i> 좌표등록 접기");
   // display: block 이 된 직 후,
   window.setTimeout(function() {
    map_regist.relayout();
}, 0);
 } // if($("#div_normal").css("display") == "none")
 else
 {
   $("#div_regist").hide();
   $("#btn_regist").html("<i class='fa fa-folder-open'></i> 좌표등록");
   // display: block 이 된 직 후,
   window.setTimeout(function() {
    map_regist.relayout();
}, 0);
 } // else

 

아래 화면처럼 문제 해결!!!