I have a Google Map (API 3) in a hidden div when my page loads. If I set the CSS on the map to display:block I get the usual problem of the map not filling the complete area inside the map’s container. This is not a problem on the website itself, as upon clicking “show map” I call google.maps.event.trigger(map, ‘resize’); and this displays the map correctly.
However my problem arises in print preview. Unless “show map” has been clicked on prior to the user selecting print preview, the map within print preview will display as it does on the load of the page i.e. not fitting within the bounds of the container.
Can anyone suggest a fix for this?
You could set up a print button, and on click it opens a new page with new css to fit a 8.5×11 sheet. You can also use static maps in this page so they don’t get the zoom bar etc.
A lot of pages use print buttons on receipts because printing a webpage directly is so difficult.