Resizing the Google maps side panel

edited September 2007 in Style Development
The Google maps side panel is way too big. You could cut it down to half the size and resize the fonts and you'd see much more map and much less junk.

I haven't had a problem resizing it. This cuts it to about 1/3 its original size:

@namespace url(; @-moz-document url("") { /* Resize left panel and map */ #panel,#panel_dir {width:7em !important; padding-left:0px !important; padding-right:0px !important;} #map,#paneltoggle {left:7em !important; margin-right:7em !important;} }

Basically I've just changed the panel width and margin from 20em to 7 em.

The problems I've encountered are:

1. Toggling the panel closed hides the panel but doesn't expand the map to fill the empty space.

2. Toggling the panel back open shifts the focus point of the map to the right.

After messing with this for a couple of days I'm burned out with frustration. I need to walk away from it for a while. Is anyone else interested in playing with it for a while? I'll warn you - Google css is a mess and this one seems to rewrite some elements depending on whether the panel is open or closed. Maybe it's a job for Greasemonkey.


  • theres a bit of a pause when you show it again before it shrinks back to size
    @namespace url(; @-moz-document domain("") { /* Resize left panel and map */ #panel[style$="left: 0px;"],#panel_dir {width:7em !important; padding-left:0 !important; padding-right:0 !important;} #map:not([style*="left: -8px"]),#paneltoggle[style$="left: 320px;"] {left:7em !important; margin-right:7em !important;} }
  • That's better but it still has problems.

    #paneltoggle[style$="left: 320px;"] is not the same on every computer. It's 320 on yours, 360 on my 1024 screen, and 126 on my 1200 screen.

    Neither the "-8px" nor the "left: xxpx" flag exists when the page is newly opened (not just refreshed) so the style isn't applied at all when the page is first opened.

    And the map keeps "drifting" to the right. Open and close the side panel a few times and you'll see what I mean.
  • not sure what to do about that drifting, i'll try messing around later when i'm back
    it works without toggling the side now, but you still need to change the px to match yours
    btw whats that #panel_dir for anyways?
    @namespace url(; @-moz-document domain("") { /* Resize left panel and map */ #panel[style$="left: 0px;"], #panel[style="height: 741px;"], #panel_dir {width:7em !important; padding-left:0!important; padding-right:0!important} #paneltoggle[style$="left: 320px;"], #paneltoggle[style="padding-top: 368.5px; padding-bottom: 368.5px; visibility: visible;"], #map:not([style*="left: -8px"]) {left:7em !important; margin-right:7em!important} }
  • edited September 2007
    I've been messing with this for a week and I have 7k of code. I must have seen #panel_dir in there somewhere but I'll be darned if I can find it now.

    The big computer is shut down for the night but I'll try this out on the laptop - it's not very good for editing though.

    I'm looking at using the status of #panelhidearrow and #panelshowarrow as flags but that's for tomorrow too.

    (Edit, #panelhidearrow, not .panelhidearrow)
  • I think I have a handle on using #panelshowarrow as a flag.

    When the panel is closed #panelshowarrow contains a style visibility: visible;

    When it is open the style is visibility: hidden;

    You can't use #panelhidearrow as a flag because its visibility never changes. It's always visible but #panelshowarrow has a higher z-index.

    Is there any way to tie the #map:left property to the #panelshowarrow property? I see you used a :not statement but

    {left:-7em !important;
    padding-left:0px !important;
    padding-right:0px !important;}

    keeps giving me an error message that: Missing closing ')' in negation pseudo-class ... so I can't even experiment.
  • edited September 2007
    i dont think you can select other things with :not
    changed it a bit so now you dont need to change the px to match yours
    it also hides the panel when resizing
    @namespace url(; @-moz-document domain(""){ #panel:not([style*="left: -"]) {width:7em!important} #paneltoggle:not([style*="left: -"]), #map:not([style*="left: -"]) {left:7em!important; margin-right:7em!important} #paneltoggle[style*="background"], #paneltoggle[style*="background"] *, #panel[style*="background"] *, #panel[style*="background"]{display:none!important} }
  • edited September 2007
    I didn't think you could select other things with :not unless it was a sibling or child but I thought it was worth a try. It doesn't explain the syntax error but I don't really know how to work with :not and I always have to look up examples when I use it.

    Thanks. This works great. There is a conflict with my existing spaghetti code but I have the whole weekend to find it.

    (Edit - Found it! A conflict the the #panel background and my other stuff.)
  • #panel:not([style*="visible"])
  • For anyone that might be interested here's a link to the work in progress ...
Sign In or Register to comment.