Google Maps problem z wysokością CSS Flexbox model

Mam prosty układ, w którym ciało ma pełną wysokość minus wysokość stopki + wysokość nagłówka. Osiąga się to z modelu schematu flexbox (http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/)Google Maps problem z wysokością CSS Flexbox model

<!DOCTYPE html> 
<html> 
<head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; /* to avoid scrollbars */ 
     } 
     #wrapper { 
      display: flex; /* use the flex model */ 
      min-height: 100%; 
      flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ 
     } 
     #header { 
      background: yellow; 
      height: 100px; /* can be variable as well */ 
     } 
     #body { 
      flex: 1; 
      border: 1px solid orange; 
      height: 100%; 
     } 
     #footer { 
      background: lime; 
     } 
     #map-canvas { 
      height: 100%; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
     var map; 
     function initialize() { 
      var mapOptions = { 
       zoom: 8, 
       center: new google.maps.LatLng(-34.397, 150.644) 
      }; 
      map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="header">Title</div> 
     <div id="body"> 
      <div id="map-canvas"></div> 
     </div> 
     <div id="footer"> 
      Footer<br /> 
      of<br /> 
      variable<br /> 
      height<br /> 
     </div> 
    </div> 
</body> 
</html>

Jestem stoi problem z google maps. Nie mogę go zainicjować w działce canvas, ponieważ (zakładam, że z tego powodu) nie ma zdefiniowanej wysokości.

Czy istnieje sposób na tworzenie map google?

Dzięki

Źródło

2014-11-30 Vladimir Hraban

Jak się w tym schematu flexbox? – geocodezip

@geocodezip, jest obsługiwany we wszystkich nowoczesnych przeglądarkach w dzisiejszych czasach bez żadnego JS innej firmy –

Ustaw wysokość do wysokości elementu w JavaScript #body#map-canvas przed tworzenia mapy.

var mapCanvas = document.getElementById('map-canvas'); 
mapCanvas.style.height = document.getElementById('body').clientHeight + 'px';

wersja jQuery:

$('#map-canvas').height($('#body').height());

JSFiddle demo

Źródło

2014-11-30 15:27:28 MrUpsidown

height: 100% nie działa zgodnie z oczekiwaniami. Można użyć pozycjonowanie bezwzględne wielkości mapę Google:

var map; 
 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 8, 
 
    center: new google.maps.LatLng(-34.397, 150.644) 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrapper { 
 
    display: flex; 
 
    min-height: 100%; 
 
    flex-direction: column; 
 
} 
 
#header { 
 
    background: yellow; 
 
    height: 100px; 
 
} 
 
#body { 
 
    flex: 1; 
 
    background: orange; 
 
    position: relative; 
 
} 
 
#footer { 
 
    background: lime; 
 
} 
 
#map-canvas { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<div id="wrapper"> 
 
    <div id="header">Title</div> 
 
    <div id="body"> 
 
    <div id="map-canvas"></div> 
 
    </div> 
 
    <div id="footer"> 
 
    Footer<br/>of<br/>variable<br/>height 
 
    </div> 
 
</div>

Źródło

2014-11-30 15:52:57

Google Maps problem z wysokością CSS Flexbox model

Odpowiedz

Powiązane problemy