How does google maps print work?

Question

Even without a "printer-friendly" view to print directions, when I choose "File->Print" in my browser, the page is formatted differently than the original view. How does Google achieve this? Is it a special javascript facade?

Answer 1

Google is doing this by specifying @media print for their styles on the page.

You can also do this is by specifying the "media" type for the <link> tag. You can specify that stylesheets should only be applied for screen display, or in this case for print.

Example from the W3C CSS 2.0 spec:

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

OR

@media print {
    body { font-size: 10pt }
}

Allowed types:

all, braille, embossed, handheld, print, projection, screen, speech, tty, tv

Answer 2

There'll be a print stylesheet defined in the code, something along the lines of:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

if the stylesheet were contained in a separate file. Or:

@media print {
    body { font-size: 10pt }
}
@media screen {
    body { font-size: 13px }
}
@media screen, print {
    body { line-height: 1.2 }
}

if the styles are defined in the body of the code. The last definition shows that the same style can be applied to multiple media types.

I've no idea how Google organise their codebase, and it is irrelevant for the purposes of this answer.

Recognised media types are:

all Suitable for all devices.
braille Intended for braille tactile feedback devices.
embossed Intended for paged braille printers.
handheld Intended for handheld devices (typically small screen, limited bandwidth).
print Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
projection Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
screen Intended primarily for color computer screens.
speech Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

From here

Answer 3

View Source -> Search for "@media print".

The google maps page defines a separate layout for print styles in the <style> declaration at the top of the page. Their engineers have done a really fine job of obfuscating as much of the content as possible.