google maps height 100% of div parent
If you try to use style="width:100%;height:100%" on your map div, you get a map div that has zero height. That's because the div tries to be a percentage of the size of the
<body>
, but by default the<body>
has an indeterminate height. There are ways to determine the height of the screen and use that number of pixels as the height of the map div, but a simple alternative is to change the so that its height is 100% of the page. We can do this by applying style="height:100%" to both the<body>
and the<html>
. (We have to do it to both, otherwise the<body>
tries to be 100% of the height of the document, and the default for that is an indeterminate height.)
code snippet:
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="block halfrect" style="height:100%">
<div id="map" style="height:100%;"></div>
</div>
mattia
Updated on June 04, 2022Comments
-
mattia almost 2 years
Is it possible make a google map height 100% of the parent div? I noticed that with the height 100%, the map is not visible, but if I add the height of the div with the map in pixel the map is correctly visualize. is there some tricks to achieve the map 100% of the parent div? this doesn't works
<div class="block halfrect"> <div id="map" style="height:100%;"></div> </div>
this works
<div class="block halfrect"> <div id="map" style="height:590px;"></div> </div>
any idea?