지도 api 호출 문의입니다 (사이징 )

안녕하세요 초급개발자 입니다…
개발 하는도중 막히는 부분이 있어 문의드립니다.

카카오 api에서 제공하는 지도는 직사각형 형태의 모양인데.

제가 적용하려고 하는 영역은 정사각형 형태라 api를 호출하여 지도를 그리면 화면 중심점이 오른쪽으로 치우쳐져 있어서
어려움을 겪고있습니다.
실제 나온는 화면은 이렇게 나오고
1

적용되어야 하는 화면은 이렇게 나와야하는데.
2

이럴땐 어떻게 해야 이문제가 해결이되는지 문의드립니다…
코드.

var lat = '${lat}'; var lon = '${lon}'; var infowindow = new kakao.maps.InfoWindow({zIndex:1});
										var mapContainer = document.getElementById('map'),
										    mapOption = {
										        center: new kakao.maps.LatLng(lat,lon),  // 지도의 중심좌표
										        level: 3,  //지도의 확대 레벨
										       
										    }; 
										// 지도를 생성합니다    
										var map = new kakao.maps.Map(mapContainer, mapOption);
										displayMarker(lat,lon);

										// 지도에 마커를 표시하는 함수입니다
										function displayMarker(lat,lon) {
											
											var coords = new kakao.maps.LatLng(lat,lon);
										    // 마커를 생성하고 지도에 표시합니다
										    var marker = new kakao.maps.Marker({
										        map: map,
										        position: new kakao.maps.LatLng(lat,lon)
										    });
										    var infowindow = new kakao.maps.InfoWindow({
									            content: '<div style="width:150px;text-align:center;padding:6px 0;">${result.DOCK_NM}</div>'
									            ,disableAutoPan: true
									        });
									        infowindow.open(map, marker);
									        map.setCenter(coords);
									        
										}
										

			
										</script>

지도가 올라간 HTMLElement의 width, height 스타일이
정사각형으로 적용되어 있는지 확인 부탁드립니다.

지도 스타일이 동적으로 변경되는 부분이 있다면 아래 답변 참고해주세요.