Jump to content
Sign in to follow this  
kbellis

Controling Height of Google Maps

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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Good to know, and thank you very much for the quick reply.

 

Just out of curiousity, why is width not similarly governed?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...