Google지도 : 전체 화면 + fitBounds가 경계에 맞지 않습니다.

Question

마커를 표시하는지도가 markerClusterer입니다.

모든 것이 정상적으로 작동하지만 전체 화면 모드에서 클러스터를 클릭하면 "fitBounds"가 실행되고 확대/축소는 올바르게 변경되지 않습니다 (축소 대신 축소가 발생 함).

코드 :

var mapOptions = { 
    zoom: 17, 
    minZoom: 4, 
    maxZoom: 20, 
    center: {lat: 0, lng: 0}, 
    fullscreenControl: true 
} 

var mcOptions = { 
    gridSize: 20, 
    styles: clusterStyles, 
    maxZoom: 20 
}; 

var bounds = new google.maps.LatLngBounds(); 

function initialize(itensJSON){ 

    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

    $.each(itensJSON, function (i, item) { 
     var marker = new google.maps.Marker({ 
      position: item.location, 
      id: item.id 
     }); 
     markers.push(marker); 
     bounds.extend(marker.getPosition()); 
    }); 

    map.fitBounds(bounds); 
    markerClusterer = new MarkerClusterer(map, markers, mcOptions); 
} 

HTML : markerclusterer.js의 'triggerClusterClick'에서 fitbounds을 실행할 때

<div id="map_container" style="position: absolute; width: 100%; height: 80%;"> 
     <div id="map" style="width: 100%; height: 100%"> 
     </div> 
    </div> 

축소는, 대신에 줌의 발생 :

ClusterIcon.prototype.triggerClusterClick = function(event) { 
    var markerClusterer = this.cluster_.getMarkerClusterer(); 

    // Trigger the clusterclick event. 
    google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_, event); 

    if (markerClusterer.isZoomOnClick()) { 
    // Zoom into the cluster. 
    this.map_.fitBounds(this.cluster_.getBounds()); 
    } 
}; 

무슨 일이 일어나는지 아는 사람 있습니까?

PS : 전체 화면으로 변경이 "fullscreenControl"로 구성되어 (옵션지도에 사용) 문제와

샘플 : fiddle이

Answer 1

문제가 발생했을 때 사용에서 '% 측정'

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px 
} 

솔루션 샘플 : 사업부지도의 높이가

는이 같은 문제를 해결 fiddle