When I set the height of my Google map div in pixels, it displays correctly. However, when I try to set it as a percentage, specifically 100%, the map does not show up. I have tried setting the height of all parent divs as well, based on suggestions from SOF answers, but still no luck. Can anyone provide some guidance?
This is the code that works:
<div id="map-wrapper">
<div id="map-canvas"></div>
</div>
html, body, #map-wrapper #map-canvas {
margin: 0;
padding: 0;
height: 840px;
width: 100%;
}
And this is the code that does not work:
<div id="map-wrapper">
<div id="map-canvas"></div>
</div>
html, body, #map-wrapper #map-canvas {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
JavaScript:
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);