how to use media print, for google maps

Question

I have this webbrowser view of a page, with a Google map.

Then I have 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 then use print page or print view then I get this:

As you can see the Google map is OK in the size for the page, but it's too big/just a little part of the true image. How can I fix this, so I get a Google image like the Browser View on the Print View?

Answer 1

This cannot be done using CSS.

You will need a special page with a map sized as it has to be printed, or zoom-out the map before printing(this may be done using javascript).