Improve the UI of Google Maps and MSN Virtual Earth

by Jason Clarke on July 27, 2005 at 05:14 PM

Google Maps Improved with CSS

A little-known feature of Firefox is the ability for a user to set a CSS file (Cascading Style Sheet) for a given site, replacing the one the site would otherwise use. Zmarties has created a CSS file for Google Maps and MSN Virtual Earth respectively, making some very impressive improvements to both interfaces.

The improvements to Google Maps include:

  • enlarge the map to take up the whole of the browser window
  • place the results window in front of the map, in a semi-transparent form, which becomes more solid when the mouse moves over it to use it
  • reduce the size of the search form, which is similarly semi-transparent
  • remove the logo and banner which were taking up too much space
  • remove the text labels that just duplicate icons
While the improvements to MSN Virtual Earth include:
  • make the banner semi-transparent, as it is in IE
  • move the menu up to the top of the banner
  • remove the "about" menu item, which adds nothing one you have read it once
  • move the scale to the corner of the map, and give it a solid background, so that it can actually be read
  • shrink the size of the zoom control slightly, and make it semi-transparent to obscure less of the map
  • move the compass rose, so it's not so in the way, and make it semi-transparent (but less so when you actually mouse over it to use it)
  • fix the size of the "x" box in the corner of info windows
  • increase the font size for permalinks, to make them easier to read and click on
  • hide the what and where help text hints
  • Stop the search result titles SHOUTING
I have to say that I'm loving using Google Maps with this interface. I'm sure there are good reasons why Google doesn't present it this way by default, but for me this is exactly how I want a mapping site to look. Instructions on how to use the CSS files can be found on Zmarties' site.

* Note that  in the event that Google or Microsoft change the underlying site substantially, these style sheets may cease to work as advertised. Simply removing them will allow you to see the sites as they were originally intended once again.