Jump to content

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?

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
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
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...
×
×
  • Create New...