Jump to content

Controling Height of Google Maps


kbellis
 Share

Recommended Posts

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

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>
  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...