지도 호출 시 center 가 아닌 곳으로 이동됩니다

Flutter 에서 웹뷰 통해서 지도를 띄워주고 있는데 center 가 왼쪽 끝에서 나오고 있습니다.
어떤 이슈인지 확인해주실 수 있으신가요?

<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
</head>
<style>
body {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.dot {
  height: 10px;
  width: 10px;
  background-color: #3A67F9;
  border-radius: 50%;
  display: inline-block;
}
</style>
<body style="margin:0px; background-color: transparent">
  <div id="map" style=`width:100%;height:${height}px;margin:0px;`></div>
  <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=${AppConfig.kakaoJavaScriptKey}&libraries=services"></script>
  <script>

  const container = document.getElementById('map');
  const initPosition = new kakao.maps.LatLng($lat, $lng);

  const options = {
    center: initPosition,
    level: 4
  };
  
  const map = new kakao.maps.Map(container, options);
  
  // Marker
  let marker;
  if(${marker != null}){
    const markerSize = new kakao.maps.Size(${marker?.toSize().$1 ?? 0}, ${marker?.toSize().$2 ?? 0}); 
    const markerOption = {
        offset: new kakao.maps.Point(${marker?.toOffset().$1 ?? 0}, ${marker?.toOffset().$2 ?? 0})
    };
  
    const markerSrc = '${marker?.toImage() ?? ""}';
    
    const markerImage = new kakao.maps.MarkerImage(markerSrc, markerSize, markerOption);

    marker = new kakao.maps.Marker({
        map: map,
        position: initPosition,
        image: markerImage,
    });
  } else {
    const markerSize = new kakao.maps.Size(50, 50); 
    const markerOption = {
        offset: new kakao.maps.Point(25, 50)
    };

    marker = new kakao.maps.Marker({
        map: map,
        position: initPosition,
    });

  }
  marker.setMap(map);

지도 크기가 동적으로 변경되거나 모달, 탭 안에서 지도를 표시하고 있나요?
지도 영역 또는 display 스타일 속성이 변경되는 경우 map.relayout(); 호출 후 map.setCenter(laying);로 위치를 조정해야 합니다.
아래 답변과 문서 함께 참고해주세요.

https://devtalk.kakao.com/t/kakao-map-api/103167/2
https://apis.map.kakao.com/web/documentation/#Map_relayout
https://apis.map.kakao.com/web/sample/mapRelayout/

flutter_inappwebview 해당 패키지를 통해서 지도를 구현했는데
아래 옵션 사용 시 Android 쪽에서 이 이슈가 발생하는 것을 확인하였습니다.

  android: AndroidInAppWebViewOptions(
    useHybridComposition: true,
  ),

false 로 바꾸니 해당 이슈가 나타나지 않았습니다.

1개의 좋아요