How to use print for printing, for Google maps

Question

I have this web browser view on a google map page.

Then I added some @Media Print style

<style type="text/css"> @media print { body{font-family:georgia,times,sans-serif;} img{max-width:500px;} #headerblock{display:none;} #navigationblock{display:none;} #thewaydiv{display:block;} #footerblock{display:none;} #contentmap{min-height:100px; position:relative; width:100%;} #map{border-bottom:0px; border-left:0px; border-top:0px; border-right:0px; height:250px; margin-top:0px; width:100%;} } </style> 

When I use the print or view page, I get the following:

As you can see, the Google map matches the page size, but it's too big / just a small part of the true image. How can I fix this so that I get a Google image, such as a browser view in the viewport?

Answer 1

This cannot be done using CSS.

You will need a special page with the size of the map you want to print, or reduce the map before printing (this can be done using javascript).

Answer 2

I also ran into this problem with data driven dynamic cards. However, I found a way to use css to make this work a little smoother, without having to manipulate the map using the API or a clumsy separate map page.

I gave the map a div container with a certain height and set its css overflow to hidden. I added a second map under the first, using the same setting, but with a print size of 700 pixels wide by 500 pixels wide.

Finally, the print style sheet simply has a display: no for the first card that displays the second hidden map in its container.

Is it hacked? Maybe, but it worked instantly for me.