I have a simple page with a search that shows the results throught the Google Maps API. The problem is, when I put on CSS height:100%, the map dont shows up. If I change it to 500px, it works fine. How I can use % in the height of the Google Map div?
Here's the code:
Page
<body>
<div id="map"></div>
</body>
CSS
<style>
body, html {
height: 100%;
width: 100%;
}
#map {
height: 100%;
width: 100%;
min-height: 100%;
max-height: none;
}
</style>
Script
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
</script>