Google Map canvas is getting blank when printing (Ctrl + P)

Question

I'm trying to print the google map canvas that is inside a bootstrap panel just like below:

<div class="panel panel-default">
    <div class="panel-body">
        <div id="map">...</div>
    </div>
</div>

I'm trying to print in a simple way, just pressing CTRL + P. But at print visualization box, the map is blank. What could be happening?

Some images:

At page

At print box

Answer 1

By selectively removing various lines from the @media print sections of the Bootstrap CSS I've discovered that my map comes back when I remove the img {max-width...} line:

@media print { //...there's other stuff above here img { max-width: 100% !important; } //...there's other stuff below here }

You can also override the effects of this (vs removing from the BS code) by adding the following somewhere below where you've imported bootstrap:

@media print { img { max-width: none !important; } }

Note that I'm using Sass in the above code samples; I'm on a Rails project, so I'm looking at the BS code via the bootstrap-sass gem. The equivalent Less or vanilla CSS should be easy to achieve.

Very much still working on this to see if it's really a fix and/or if this change has collateral damage... may want to isolate this to the div containing your map or something.

EDIT: Looks like this line actually comes from the code taken from the HTML5Boilerplate project, which is included in Bootstrap. I've created a minimal demo page and opened an issue about this on the H5BP project.

Update 21 Jul 2016: The fix for this is slated for inclusion with BS 4.

Answer 2

The width of the canvas was too large. I set a limit and it worked.