Google Map canvas becomes blank when printing (Ctrl + P)

Question

I am trying to print a google map canvas that is inside the bootstrap panel as below:

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

I am trying to print in a simple way by simply pressing CTRL + P But in the print visualization window, the map is empty. What can happen?

Some images:

On the page

In the print window

Answer 1

By selectively deleting various lines from @media print Bootstrap CSS sections, I found that my map returns when I delete the line img {max-width...} :

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

You can also override the effects of this (and remove from the BS code) by adding the following below, where you imported the boot file:

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

Note that I use Sass in the above code samples; I am working on a Rails project, so I look at BS code through bootstrap-sass . Equivalent Less or Vanilla CSS should be easily achieved.

A lot of work is being done on this to see if this fix is ​​really and / or if this change has collateral damage ... you might want to allocate it for a div containing your map, or something like that.

EDIT: It looks like this line actually comes from code taken from the HTML5Boilerplate project that is included in Bootstrap. I created a minimal demo page and opened the problem about it in the H5BP project.

Updated July 21, 2016. A fix for this is scheduled for inclusion in BS 4 .

Answer 2

The canvas was too wide. I set a limit and it worked.