Geek Answers Handbook

Google Maps Width Guide

I have a 2 column layout for a website, with a left column with a fixed width and the correct width of a google map, which fills the rest of the width not occupied by the left column.

Problem: However, I cannot get Google maps <div id="map_canvas"> be fluid and occupy the rest of the width. Did I install it wrong? Thanks!

HTML

 <div id="main_container"> <div id="sidebar"></div> <div id="map_container"> <div id="map_canvas"></div> </div> </div>

CSS

 #main_container { width: 100%; height: 500px; float: left; clear: both; position: relative; z-index: 1; } #map_container { height: 100%; float: left; position: relative; } #sidebar { width: 270px; float: left; } #map_canvas { height: 100%; min-width: 100px; float: left; display: block; position: absolute; z-order: 1000; }
+7
source share
1 answer

If you try to use style="width:100%;height:100%" on your div div, as you did by specifying a height of 100%, you will get a div map with zero height. This is because the div tries to be a percentage of the size of the <body> , but by default it has an undefined height.

There are ways to determine the height of the screen and use this number of pixels as the height of the map div, but a simple alternative is to change the <body> so that its height is 100% of the page. We can do this by applying style="height:100%" both <body> and <html>. (we must do this for both, otherwise <body> tries to be 100% of the height of the document, and the default value for this is undefined height.)

Reconfiguring your css values ​​should solve your problem.

+12
source

More articles:


All Articles