Почему при печати веб-страницы не будет печататься холст Google Map API V3?

Question

Заранее благодарим за любую помощь, которую вы можете предоставить! Я создал инструмент карты, который, кажется, работает хорошо; Я получаю карту, перетаскиваемый маршрут, несколько путевых точек и полную динамическую панель directions_panel. Я хочу, чтобы пользователи могли распечатать эту веб-страницу и получить map_canvas и directions_panel. В тестировании предварительный просмотр печати раньше включал map_canvas, но где-то на этом пути map_canvas перестал появляться при печати веб-страницы. Как я могу заставить его отображаться при печати?

Вот мой HTML.

<div id="map-route-page">
<div id="map_canvas"></div>
<div class="clear"></div>
<div class="map-buttons">
<input type="submit" id="showform" value="Edit Map">
<a href="javascript:if(window.print)window.print()"><input type="submit" id="printpage" value="Print this Page"></a>
</div>
<div class="clear"></div>
<div id="directions_panel"></div>
</div>

Обновление: возиться с CSS, я обнаружил, что карта становится пригодной для печати, если я уберу "position:lative" и "-webkit-transform: translateZ(0);" из #map_canvas. К сожалению, из-за этого вся печатная страница выглядит странно (карта слишком большая и не в своем положении). Есть ли еще какой-нибудь тег или CSS, который я должен добавить, чтобы это исправить?

Answer 1

Уф! После тонны проб и ошибок я нашел решение. Хотя я указал ширину и высоту моего #map_canvas в своем файле main.css, я не указал эти атрибуты в своем файле print.css. Я не редактировал ни положения: относительные, ни атрибуты -webkit-transform, чтобы сделать эту работу для меня.