How to view Google Maps in “print” mode?

Question

I'm using the Google Maps API v2 and I'd like to be able to print the map the same way as Google does on its Maps page.

You can click the little printer icon and it creates a new popup window with the same map but all the unprintable stuff (like the controls) is taken out. I know that they use @media print to achieve that effect when you hit "Print preview" or "Print" in the navigator. However, the popup window isn't in print mode.

Is there any way of doing the magic trick they're doing, like setting the current media type to "print"? Or or they cheating and setting a custom CSS style cheat?

I've got a Silverlight plugin and a Google Map on the same page and I want to be able to create a popup window containing just the map ready for printing (like Google is doing).

Thanks to http://abcoder.com/google/google-map-api/print-button-for-google-map-api/ I know how to get the HTML content but I can only get the content with all the controls etc on it (which I don't want).

Any help will be appreciated.

Answer 1

Another useful approach for printing google maps is to use the Google Static Maps API. You can generate an static image based on a range of display paramters (location, zoom level, size, markers etc...) and include that image in your print view page.

Answer 2

I was having the same problem with a custom map image overlay added via kml. Gaby's heads-up about the gmnoprint class was the key. In my case, the div with the gmnoprint class applied was the direct parent of my img element that was getting disappeared. I basically created a "make overlay printable link":

    $("#printable-map").click(function() {
        if($(this).text() == "Include overlay when printing") {
            $(this).text("Exclude overlay when printing");
            $("[src$=blah.png]").parent().removeClass("gmnoprint");
        } else {
            $(this).text("Include overlay when printing");
            $("[src$=blah.png]").parent().addClass("gmnoprint");
        }
    });

Tested and works in Safari, FF, and Chrome.

Answer 3

Google maps put a class gmnoprint on all elements that they do not want to print .. so setting this to display:none in your print css file or popup window will hide them ..

.gmnoprint{
  display:none;
}

Of'course this will hide whatever google deems as not-for-printing.. If you want to select other items you will have to somehow parse their html code :(