지도가 제대로 나오지 않습니다

지도API에 있는 예제는 제대로 작동이 되지만,

만들고 있는 웹페이지 내에서는 정상적으로 출력이 되지 않습니다.

아래는 출력이 제대로 되지 않는 경우이며, API에 있는 예제 중 마커를 추가하고 위치를 바꾼 것입니다.
위치를 바꾸기 전에도 출력은 제대로 되지 않았습니다.

<div id="map" style="width:100%;height:350px;"></div>
			
			<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=2c3adfbd4c9359122e113ffbf3da9318"></script>
			<script>
			var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
			    mapOption = { 
			        center: new kakao.maps.LatLng(37.52112, 127.12836360000005), // 지도의 중심좌표
			        level: 3 // 지도의 확대 레벨
			    };
			
			var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
			
			// 마커가 표시될 위치입니다 
			var markerPosition  = new kakao.maps.LatLng(37.52112, 127.12836360000005); 
			
			// 마커를 생성합니다
			var marker = new kakao.maps.Marker({
			    position: markerPosition
			});
			
			// 마커가 지도 위에 표시되도록 설정합니다
			marker.setMap(map);
			
			// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
			// marker.setMap(null);    
			</script>

다른 설정이나 코드 없이 딱 그것만으로 하신 건 맞나요?

유사 케이스가 여럿 있으니 참고해주세요
https://devtalk.kakao.com/t/topic/44357

setTimeout(function(){ map.relayout(); }, 1000);

해당 글에 있는 함수를 적용했고, 되지 않아 delay까지 줬는데도 해결되지 않습니다.
modal로 띄우는 것이 아니라 div태그로 바로 출력하고자했습니다.
하지만 실행 후 크롬의 개발자도구를 한번이라도 켰을 때는 개발자도구를 꺼도 이후 출력이 제대로 되며,

처음 실행 후 개발자도구를 켜지 않을 경우에는 계속 회색 화면이 나옵니다.

map div에 크기가 변동 없이 고정된 상태가 맞나요? style로 사이즈를 적용하셨나요?

개발자 도구를 켰을 경우에는
window size가 변경되어 내부에서 relayout을 호출하기 때문에
지도 영역이 재계산되어 바르게 보이는 것 같은데요.

위 첨부해주신 소스 그대로인가요?
확인할 수 있는 url 또는 소스코드 첨부해주시면 확인해보겠습니다.

탭 네비게이션을 사용하는 UX 구조 같은데
지도가 보이는 탭을 누른 시점에
map.relayout() 및 원하는 지도 중심을 다시 잡기 위한 map.setCenter()를 호출해 주셔야 정상동작 합니다.

소스html
소스파일을 첨부합니다. 탭방식으로 이루어져있으며 말씀하신대로 화면의 크기가 변경될 때만 제대로 작동하고 있습니다.

감사합니다 해결했습니다!