2012-09-03 4 views
6

Googleマップを使って、このウェブブラウザのページを表示しています。あなたのようメディアプリントの使い方、google maps

print view

browser view

は、それから私は、私はその後、印刷ページや印刷ビューを使用すると、私はこれを取得いくつかの@mediaプリントスタイル

<style type="text/css"> 
     @media print 
     { 
     body{font-family:georgia,times,sans-serif;} 
     img{max-width:500px;} 
     #headerblock{display:none;} 
     #navigationblock{display:none;} 
     #thewaydiv{display:block;} 
     #footerblock{display:none;} 
     #contentmap{min-height:100px; position:relative; width:100%;} 
     #map{border-bottom:0px; border-left:0px; border-top:0px; border-right:0px; height:250px; margin-top:0px; width:100%;} 
     } 
    </style> 

を追加しましたGoogleマップがそのページのサイズでOKであることがわかりますが、それは大きすぎる/実際の画像のほんの一部です。これを修正するにはどうすればよいですか?ブラウザビューのようなGoogle画像が印刷ビューに表示されますか?

答えて

2

これはCSSを使用して行うことはできません。

あなたがマップと特別なページが必要になりますが、それを印刷する必要があるようなサイズ、またはズームアウトマップを(これはJavaScriptを使用して行われてもよい)印刷する前に。

1

この問題は、動的データ駆動型マップでも発生しました。 しかし、私はこの作業を少し滑らかにするためにcssを使う方法を見つけましたが、APIやclunkyな別のマップページを使ってマップを操作する必要はありませんでした。

私は定義された高さのコンテナのdivをマッピングし、隠しにそのCSSのoverflowを設定しました。 最初のマップの下に同じ設定を使用して2番目のマップを追加しましたが、700pxの幅と500pxの高さのような印刷可能なサイズがあります。そのコンテナ内の二隠されたマップを明らかに最初のマップのどれも:

最後に印刷スタイルシートは、単に表示がありません。

これはハックですか?
多分、それはすぐに私のために働いた。

関連する問題