Google Maps CSS
July 8, 2005 9:54 AM Subscribe
How does the CSS on Google Maps work?
I'm trying to understand how they managed to get a fixed-height header, a fixed-width right-hand column, and a div in the left-hand column that fills the remaining width and height. (Watch the behavior of the map as you resize your browser window.)
Looking at the source code itself is less than helpful.
Google searches have turned up this, which is close to what I want, but the height is fixed, not fluid. This is also close, but the center div doesn't actually fill all the pink space, it only surrounds the center text.
I'm trying to understand how they managed to get a fixed-height header, a fixed-width right-hand column, and a div in the left-hand column that fills the remaining width and height. (Watch the behavior of the map as you resize your browser window.)
Looking at the source code itself is less than helpful.
Google searches have turned up this, which is close to what I want, but the height is fixed, not fluid. This is also close, but the center div doesn't actually fill all the pink space, it only surrounds the center text.
Response by poster: I've been playing with the Google Maps API and I'm trying to put together a map toy with the same general appearance as maps.google.com.
I don't think it would be too hard to do this with Javascript, but I was rather hoping I could get it with just CSS.
posted by event at 10:13 AM on July 8, 2005
I don't think it would be too hard to do this with Javascript, but I was rather hoping I could get it with just CSS.
posted by event at 10:13 AM on July 8, 2005
I haven't looked at the actual code for Google Maps, but perhaps it uses something like a "jello" CSS layout?
posted by geeky at 10:25 AM on July 8, 2005
posted by geeky at 10:25 AM on July 8, 2005
The problem is that you cannot modify the JS file that lives on the Google server.
For now.
posted by jsavimbi at 11:05 AM on July 8, 2005
For now.
posted by jsavimbi at 11:05 AM on July 8, 2005
Response by poster: When you create the map object it uses its containing div to determine its width and height. So it really should just be a matter of getting a div to behave correctly, and the map will follow suit. In theory.
posted by event at 11:16 AM on July 8, 2005
posted by event at 11:16 AM on July 8, 2005
Why then does it only accept pixels or null vs. percentages?
posted by jsavimbi at 11:46 AM on July 8, 2005
posted by jsavimbi at 11:46 AM on July 8, 2005
Response by poster: I'm not sure I understand your question, but if you create a div as a container for the map and size it using percentages, the map will fill the container, whatever the shape of your browser window.
posted by event at 12:54 PM on July 8, 2005
posted by event at 12:54 PM on July 8, 2005
Response by poster: Thanks guys for your help. I've managed to find a solution. I'm including it here for future Googlers.
I used this suggestion for absolute positioning, allowing me to fix absolutely each corner of the div. It doesn't work in IE, though, without this workaround.
posted by event at 1:34 PM on July 8, 2005
I used this suggestion for absolute positioning, allowing me to fix absolutely each corner of the div. It doesn't work in IE, though, without this workaround.
posted by event at 1:34 PM on July 8, 2005
« Older How to camoflauge a pimple for a portrait | what direction will the hudson river be flowing on... Newer »
This thread is closed to new comments.
What is it you're trying to do?
posted by jsavimbi at 10:02 AM on July 8, 2005