Google Map płótno staje się puste podczas drukowania (Ctrl + P)

Question

Próbuję wydrukować Google Map płótna, które jest wewnątrz panelu bootstrap, tak jak poniżej:

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

próbuję drukować prosty sposób, po prostu naciskając CTRL + P. Ale w polu wizualizacji wydruku mapa jest pusta. Co może się wydarzyć?

Niektóre obrazy:

Na stronie

na pole druku

Answer 1

Poprzez selektywne usuwanie różnych liniach od @media print odcinkach Bootstrap CSS odkryłam, że moja mapa wraca kiedy wyjąć img {max-width...} wiersz:

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

Można także zmienić skutków tego (vs usunięcie z kodu BS) przez dodanie następujących gdzieś poniżej gdzie zaimportowaniu bootstrap:

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

Zauważ, że używam Sass w powyższych próbach kodu; Jestem w projekcie Rails, więc patrzę na kod BS za pomocą klejnotu bootstrap-sass. Odpowiednik Mniej lub Vanilla CSS powinien być łatwy do osiągnięcia.

Bardzo dużo pracuję nad tym, aby sprawdzić, czy to naprawdę poprawka i/lub jeśli ta zmiana ma obrażenia dodatkowe ... może chcieć to odizolować na div zawierającej mapę lub coś podobnego.

EDYCJA: Wygląda na to, że ta linia pochodzi z kodu pobranego z projektu HTML5Boilerplate, który znajduje się w Bootstrap. W projekcie H5BP stworzyłem minimalną stronę demo i opened an issue.

Aktualizacja 21 lip 2016: Poprawka do tego jest slated for inclusion with BS 4.

Answer 2

Szerokość płótna była zbyt duża. Ustawiłem limit i zadziałało.