kbellis Posted January 3, 2016 Share Posted January 3, 2016 RE: http://www.w3schools.com/googleapi/google_maps_basic.asp <!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html> In the above example, the container's size is controlled with style="width:500px;height:380px;" Substituting 100% in place of 500px, the width of the map can effectively be altered; however, the same is not true for the height of the map. Why is this true, and how else might its height be controlled without an explicit dimension in pixels? Link to comment Share on other sites More sharing options...
Ingolme Posted January 3, 2016 Share Posted January 3, 2016 With any element in the document, a percentage height only works if the parent element has an explicit height. Both the <html> and <body> elements should have their height set to 100%. This works: <!DOCTYPE html> <html> <head> <script src="http://maps.googleapis.com/maps/api/js"> </script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> <style> html,body { height: 100%; } </style> </head> <body> <div id="googleMap" style="width:500px;height:100%;"></div> </body> </html> 1 Link to comment Share on other sites More sharing options...
kbellis Posted January 3, 2016 Author Share Posted January 3, 2016 Good to know, and thank you very much for the quick reply. Just out of curiousity, why is width not similarly governed? Link to comment Share on other sites More sharing options...
Ingolme Posted January 3, 2016 Share Posted January 3, 2016 It goes down to the default width and height of block elements. By default, a block element has the full width of it's container and the height of the content within it. You can verify that by taking an unstyled <div> and putting a border on it. You can't get a meaningful percentage value of height when the height you're getting a percentage of depends on the height you're setting the percentage to. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now