작은 정사각형에지도를 표시하는 Google Maps Javascript API

Google지도 JavaScript API를 구현했으며 전체 화면지도를 얻으려고합니다.

지도 자체는 모서리의 작은 상자에만 표시됩니다. 각 모서리에 Google 요소가 있지만지도가 컨테이너를 채우지 않기 때문에 컨테이너가 올바른 크기라는 것을 알고 있습니다.

내가 가진 것은 다음과 같습니다.

코드:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAh_6k9o89NOW69iR9mL_0J6vu9QMm_54w&sensor=false&extension=.js"></script> 
<script> google.maps.event.addDomListener(window, 'load', init);

var map;

function init() {
    var mapOptions = {
        center: new google.maps.LatLng(51.508800670335646,-0.06943131238223),
        zoom: 12,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT,
        },
        disableDoubleClickZoom: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        },
        scaleControl: true,
        scrollwheel: true,
        streetViewControl: true,
        draggable : true,
        overviewMapControl: true,
        overviewMapControlOptions: {
            opened: false,
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [
    {
        featureType: 'water',
        stylers: [{color:'#46bcec'},{visibility:'on'}]
    },{
        featureType: 'landscape',
        stylers: [{color:'#f2f2f2'}]
    },{
        featureType: 'road',
        stylers: [{saturation: -100},{lightness: 45}]
    },{
        featureType: 'road.highway',
        stylers: [{visibility: 'simplified'}]
    },{
        featureType: 'road.arterial',
        elementType: 'labels.icon',
        stylers: [{visibility: 'off'}]
    },{
        featureType: 'administrative',
        elementType: 'labels.text.fill',
        stylers: [{color: '#444444'}]
    },{
        featureType: 'transit',
        stylers: [{visibility: 'off'}]
    },{
        featureType: 'poi',
        stylers: [{visibility: 'off'}]
    }
],

    }

    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
    var locations = [

    ];

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            icon: '',
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
    }
}
</script> 

<style> 
#map{
    width:100%;
    height:100%;
}
</style> 

귀하의 의견은 대단히 감사하겠습니다.