지도api 사용하는데 지도가 이상하게 출력됩니다

지도 API를 사용중인데, 출력은 되지만, 이상하게 출력이됩니다.

kakao_map_err

맵의 중앙이 보여야하는데, 맵이 언제나 왼쪽상단만 출력되고 나머지 부분은 저런식으로 보이지 않아 곤란한 상황입니다.

JavaScript와 html을 함께 사용중이며, 아래는 코드입니다…

JavaScript

var container = document.getElementById('map');
		var options = {
			center: new kakao.maps.LatLng(33.450701, 126.570667),
			level: 3
		};
		var map = new kakao.maps.Map(container, options);

		var geocoder = new kakao.maps.services.Geocoder();
		geocoder.addressSearch(`${도로명주소}`, 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);
			}
		});

html

<div class="row">
	<div class="col-md-12">
		<div class="modal fade" id="modal-container-721379" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="myModalLabel">
							지도보기
						</h5>
					</div>
					<div class="modal-body">
						<div id="map" style="width:300px; height: 200px;"></div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">
							Close
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

혹시 원인을 알 수 있을까요?

유사 게시글 답변 참고해주세요.