當我打印網頁時，爲什麼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玩弄，我發現如果刪除地圖成爲可打印「的位置是：相對於」和「-webkit變換：translateZ（0）;」來自#map_canvas。不幸的是，這使得整個打印頁面看起來很奇怪（地圖太大而且位置不合適）。是否有另外一個標籤或CSS我應該添加來解決這個問題？

Answer 1

Phew！經過大量的反覆試驗後，我找到了解決方案。雖然我在main.css文件中指定了我的#map_canvas的寬度和高度，但我沒有在我的print.css文件中指定這些屬性。我沒有編輯position：relative或-webkit-transform屬性，以便爲我工作。