Notice the fact that anything behind the 'pin marker' graphics' rectangles is obscured, even though they aren't in the version on the computer screen. This is ugly and annoying. Also, the 'pin marker' shadows are missing.
For those of us who've tried to print directions in Google Maps, or for that matter anything that involves Google's 'pin marker' graphics, a frequent annoyance is that wherever the 'pin marker' is, anything behind its image is completely obscured, instead of the marker appearing with a transparent background. I always thought this was a bug in Firefox, but after some investigation it appears that Firefox is fine, and Google Maps specifically causes this behaviour.
I got some directions between two towns in the UK using Google Maps, and printed them out. Here's the scanned version:
Notice the fact that anything behind the 'pin marker' graphics' rectangles is obscured, even though they aren't in the version on the computer screen. This is ugly and annoying. Also, the 'pin marker' shadows are missing.
That's what I thought originally. This behvaiour has been this way for literally years. However actually, no, Firefox is exhibiting the correct behaviour, and IE is exhibiting incorrect behaviour.
Google Maps is telling the browser to show in the computer screen the transparent 'pin marker' images as well as the 'pin marker' shadows, so things display correctly there. However it's also telling the browser that, when printing, it should display no 'pin marker' shadows, and replace the transparent 'pin marker' images being displayed in the computer screen with some non-transparent GIF images, which will obviously cause the appearance in the scan I showed above. Here's what's causing it:
Using DOM Inspector, I found where in the DOM Google is storing the 'pin marker' images. They're inside a DIV, and they're positioned absolutely. Google Maps places them in exactly the correct position as to overlay the map. Fine so far. However, there are only 2 'pin marker' graphics. Why are there 4 IMGs there (the fifth one is just a transparent IMG that doesn't really have relevance to this discussion)? The answer is that Google Maps uses two images for each 'pin marker' - one to be displayed on-screen, and one to be displayed when printing. The CSS style rules contained in the 'gmnoprint' class cause this content only to be displayed on screen, and the CSS style rules contained in the 'gmnoscreen' class cause this content only to be displayed when printing. Those two images with the 'gmnoprint' class are transparent PNGs, which is why the 'pin markers' display fine on screen. Those two images with the 'gmnoscreen' class are NON-transparent GIFs, which is why the 'pin markers' display horribly when printing.
Yes, we can. Using DOM Inspector, I first delete the yukky non-transparent GIFs...
... then I remove the 'gmnoprint' class from the nice transparent PNGs, so that they are printed...
Yes, we can. They don't print because Google Maps applies the 'gmnoprint' class to them:
We simply need to find the relevant shadow IMGs, and remove that class from them, so they'll print:
Here:
... and here:
Here's a scan of the printed version of this map AFTER my modifications have been implemented:
Notice the fact that anything behind the 'pin marker' graphics' rectangles is no longer obscured. The 'pin marker' shadows are now also displayed properly.
UPDATE:
I've had correspondence from a Google Maps developer after posting about this on one of their forums. :-) Here it is:
Hi Jeremy (Jez),
Your analysis of the printing bug is dead-on, all except for the reasons behind it. Firefox 1 and 2 had a nasty habit of printing transparent pixels in an image as solid black (you can still see this in the waypoint markers if you install FF2), so we added this "compromise" to print non-transparent light gray instead. This behavior was FINALLY fixed in firefox 3, although we didn't notice for a while.
I'll be fixing this bug soon, although it won't make it to production immediately, especially during the holidays [Christmas 2008].
So looks like this bug will finally be getting fixed! Woohoo!