ブラウザのGoogleマップ（V3）を印刷する

Question

マップのページ幅を100％に設定しました。地図には1つのマーカーがあり、そのマーカーの中央に配置されています。ブラウザを印刷するときに、マーカーをマーカーの中央に置いておきたいです。私は私のブラウザをサイズ直したときに

var lastPos = map.getCenter(); 
google.maps.event.addListener(map, "idle", function() { 
    lastPos = map.getCenter(); 
    console.log(lastPos.toString()); 
});  

google.maps.event.addDomListener(window, "resize", function() { 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(lastPos); 
    console.log("Re-center on " + lastPos.toString()); 
}); 

これは動作しますが、ブラウザの再サイズ自体の前に印刷する場合には動作しません：これは私がそうすることを書いたコードです。ブラウザが一定の幅を超えている場合、マップが印刷されると、マーカはページ外に（右に）シフトされます。 http://www-sf.talispoint.com/testmapprint.html

Answer 1

印刷するときに@mediaプリントを追加し、マップにサイズを与えてから、次に説明することができます。

マップを印刷すると、左上隅が維持され、マップが@media印刷サイズに合わせて調整されます。

センターを同じままにしたい場合は、マップの中心を手動で変更する必要があります。 http://jsbin.com/owiwox/33は、これを回避する方法の例です。

それはあなたが世話をする必要があり

一つのことがあることである（小さく）イベントを適用し、マップがどのように変化するかの比率を使用して、マップの中心を調整している印刷メディアのリスナーを使用しています上記のサンプルから http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

ザ・jsのコードはリッスン：あなたはそれがブラウザ間で動作させるための優れたリソースである （このソリューションは、Chromeでうまく動作します）このブラウザは、それはすべてのブラウザで動作させるために対象にする必要がある場合があります印刷要求を送信し、左上隅が大きな地図と同じ中心を持つように地図をシフトします。あなたが割り当て

これは、それはあなたが印刷されたマップ対マップの割合で入れて（またはJSからそれをチェックすることによって、サイズを取得）する必要が

1. をどのように動作するかで、短い全体的な話をカットする それに： var widthRatio = 2; var heightRatio = 3;

2. あなたは印刷メディアが適用されるために耳を傾け、それは

3. を変更しないように、あなたが印刷を完了した後、変更を元に戻すの中心をシフトします。

ズームレベル-1のタイルがキャッシュされていない可能性があるため、ここでは地図の一部がカットされるが、良い解決策はないという問題があります。タイルがないかもしれません。

Answer 2

それはあなたの「印刷」や「プリンタ」で問題だ：

は、ここに私のテストケースです。

は、私がテストしました：

1. 負荷テストマップをと

2. 印刷プレビュー非常に広いブラウザを作り、あなたが

3. を説明した。しかし、問題を見た：私は変更することができますが「Shrint to fit」（IEとFFのデフォルト）から30％と言ってスケールを印刷し、画面に表示されたように地図を印刷することができました。

もう一つの考えです：あなたは地図のdivの幅を制限するために、印刷のために別のCSSを使用しようとするかもしれ

が、私はそれが最初のマップのサイズ変更をトリガーするかどうかわからないです（あなたが参照することがこの投稿へ：Javascript Event Handler for Print）