1

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>
Improve this question
1
  • 1
    DanielPM this question doesn't appear to be salesforce or visualforce related. This site has a dedicated focus on salesforce technologies, for questions on more general programming questions you're far more likely to get help on stackoverflow.com. – Samuel De Rycke Jul 14 '15 at 14:00
2

height: 100%

won't work before initializing map so try to use JS instead. First of all you need to grab an iframe height where is the map loaded. Due to the iframe is in a different domain you cannot grab the iframe height however you can grab the document height as described below.

var body = document.body, html = document.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
document.getElementById('map').style.height = height + 'px';

Hope this will help you.

Improve this answer
1
  • If height:100% don't work, this is the best approach I've seen. Thanks Ruslan. – danielpm Jul 14 '15 at 14:07
1

Try this styling, it worked fine in my Visualforce page:

#map {
    height: 100% !important;
    padding-bottom: 50%;
    position: relative;
    width: 100%;
}
Improve this answer
1
  • It works, but it "reserves" the space for the div, even if the map isnt loaded. Thanks anyway! – danielpm Jul 14 '15 at 14:08
0

you can use css3 vh unit but it is not supported by older browser

#map {
  height: 100vh;
  width: 100%;
  min-height: 100%;
  max-height: none;
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.