All geek questions in one place

Height issue in Google Maps using Flexbox CSS model

I have a simple layout where the body takes the entire height minus the footer height + header height. This is achieved using the flexbox model ( http://philipwalton.imtqy.com/solved-by-flexbox/demos/sticky-footer/ )

<!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.imtqy.com/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>

I am having a problem with google maps. I cannot initialize it to a canvas div because (I assume the reason) it does not have a specific height.

Is there any way to make google maps?

thanks

+5
source share
2 answers

height: 100% does not work as expected. You can use absolute positioning to determine the Google map:

 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>
+9
source

Before creating your map, set the height of #map-canvas to the height of the #body element in JavaScript.

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

jQuery version:

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

Jsfiddle demo

+2
source

Source: https://habr.com/ru/post/1207960/

More articles:


All Articles