카카오 api 부분 화면만 출력되고 나머지 부분은 카카오 로고만 뜹니다

카카오 api를 받아와서 주소로 장소를 표시할려고 하는데 화면을 출력했을 때 아주 작은 부부에만 지도를 볼 수 있고 나머지 화면에는 카카오 로고만 뜹니다. 카카오 api만 출력했을 때는 지도가 잘 떴는데 버튼을 클릭했을 때 지도가 나오게 할려고 설정을 한 순간부터 지도가 잘 안뜹니다,이럴 때는 어떻게 해야 하나요?

< 카카오 맵 코드>

<div id="map" class="myDiv" style="width:100%;height:350px;">

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=818dd4a57e9e35bee82d5b6284cabfe5&libraries=services"></script>
<script>
var mapContainer = document.getElementById('map'), 
    mapOption = {
        center: new kakao.maps.LatLng(35.1584952142483, 129.06199399191797),
        level: 3 
    };  

var map = new kakao.maps.Map(mapContainer, mapOption); 

var geocoder = new kakao.maps.services.Geocoder();

geocoder.addressSearch('부산 부산진구 중앙대로 672', function(result, status) {

     if (status === kakao.maps.services.Status.OK) {

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

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

        var infowindow = new kakao.maps.InfoWindow({
            content: '<div style="width:150px;text-align:center;padding:6px 0;">삼정타워</div>'
        });
        infowindow.open(map, marker);

        map.setCenter(coords);
        
    } 
});    

geocoder.addressSearch('부산 부산진구 가야대로 772', function(result, status) {

     if (status === kakao.maps.services.Status.OK) {

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

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

        var infowindow = new kakao.maps.InfoWindow({
            content: '<div style="width:150px;text-align:center;padding:6px 0;">롯데백화점</div>'
        });
        infowindow.open(map, marker);

        map.setCenter(coords);
    } 
});

</script>

</div>

< 버튼을 눌렀을 때 맵이 보이게 설정한 코드 >

		<style>
		.myDiv{
			display: none;
			}
		</style>

 <script>
 function toggleDiv(divId) {
     var mapDiv = document.getElementById("map");
     var listDiv = document.getElementById("list");
     
     
     if(divId === "map"){
    	mapDiv.style.display = "block";
    	listDiv.style.display = "none";
     } else if(divId === "list"){
    	 mapDiv.style.display = "none";
    	 listDiv.style.display = "block";s
     	}
     }
 
  window.onload = function() {
	var listDiv = document.getElementById("list");
	listDiv.style.display = "block";
 };
  </script>
  
   <button onclick="toggleDiv('map')">Gallery</button>
   <button onclick="toggleDiv('list')">API</button>

kakaoapi

근데 뭐가 잘못됐는지 확인하기 위해 F12를 누르면 갑자기 지도가 다 뜨는데 다시 F5를 눌러서 새로고침하면 다시 부분화면만 보여집니다,뭐가 문제인가요??

이전 유사 게시글 답변 참고해주세요.
https://devtalk.kakao.com/t/kakao-map-api/103167/2