diff --git a/app/Views/bag/_dashboard_kakao_map.php b/app/Views/bag/_dashboard_kakao_map.php index cff8360..b3a71b5 100644 --- a/app/Views/bag/_dashboard_kakao_map.php +++ b/app/Views/bag/_dashboard_kakao_map.php @@ -158,9 +158,32 @@ $mapId = 'mainKakaoMap'; var bounds = new kakao.maps.LatLngBounds(); var placed = 0, pending = SHOPS.length; + // 컨테이너 크기에 맞춰 지도를 다시 그리고 영역을 재설정한다. + function refit() { + if (!mapRef) return; + mapRef.relayout(); + if (placed > 0) { mapRef.setBounds(bounds); } + else { mapRef.setCenter(new kakao.maps.LatLng(DEFAULT_CENTER.lat, DEFAULT_CENTER.lng)); } + } + var refitScheduled = false; + function scheduleRefit() { + if (refitScheduled) return; + refitScheduled = true; + (window.requestAnimationFrame || window.setTimeout)(function () { refitScheduled = false; refit(); }); + } + + // 탭(iframe) 안에서 컨테이너 크기가 늦게 확정되거나 바뀌면(표시 전환·창 크기 변경 등) + // 지도가 반만 그려지거나 엉뚱한 위치(일본 등)로 보이므로, 크기 변화 때마다 다시 맞춘다. + try { + if (typeof ResizeObserver !== 'undefined') { new ResizeObserver(scheduleRefit).observe(el); } + } catch (e) {} + window.addEventListener('resize', scheduleRefit); + window.addEventListener('pageshow', function () { setTimeout(refit, 50); }); + function done() { - if (placed > 0) map.setBounds(bounds); - setTimeout(function () { map.relayout(); if (placed > 0) map.setBounds(bounds); }, 150); + refit(); + setTimeout(refit, 150); + setTimeout(refit, 600); } if (pending === 0) { done(); return; }