Google Maps Does Not Print.


If your Google Maps does not print then perhaps your Print CSS is to blame. Mine, inherited from our esteemed clients, had this thermonuclear option embedded within it:

* {
position: static !important;
overflow: visible;

What you see there is the ‘asterisk’ selector applied at the top-level of the DOM which means it applies to every element on every page. Great, except that Google Maps rely on a combination of relative and absolute positioning, not static positioning and, most evil, the css had specified !important on the asterisk style, giving it a very high precedence.

To knock out the asterisk selector for Google Maps without disturbing the rest of my client’s Print CSS I had to declare a new selector for elements within Google Maps. This was:

#map_canvas * {
position: relative !important;

#map_canvas * > div {
position: absolute !important;

This seems to go OK.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: