Google maps api v3と印刷について
お世話になります。
Google maps api v3を使用して、WEBサイトに地図をアップしたのですが、
お客様から印刷すると地図の表示がおかくしくなると指摘されました。
印刷プレビューから表示がおかしくなるとの事です。（その方はWinXP IE8）
いろいろ原因を探したのですがよく分からず、こちらでお力をお貸し頂ければと思います。
こちらで分かった事といえば、印刷時、設定用紙の半分もしくは3分の2より下に地図が
配置されていると、表示がおかしくなるということです。
（1枚目に地図が全部配置されているのに、2枚目にも地図の下部のみが移ってしまい、地図の直後にあるコンテンツを隠してしまう。その時、1枚目の地図もおかしい等）
（ただし、地図を設定用紙の半分より上に配置すると地図等は問題なく表示・印刷される。ポリゴンも隠れない）
この現象は私が作成したmapだけでなく、他のサイトのGoogle mapsでも同じ現象のような気がします。（たまたまでしょうか？）
回避方法等、どうぞお力をお貸しくださいませ。
<script type="text/javascript">
<!--
google.maps.event.addDomListener(window, 'load', function()
{
// 地図の設定
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(30.622401694889774, 138.72735120224),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions);
// 作成するポリゴン外枠座標の配列
var points = [
new google.maps.LatLng(30.62244094020011, 138.7270232439041),
new google.maps.LatLng(30.62266551021649, 138.7274872660637),
new google.maps.LatLng(30.6226175438582, 138.7275274991989),
new google.maps.LatLng(30.62263062559512, 138.72755163908005),
new google.maps.LatLng(30.622401694889774, 138.72773402929306),
new google.maps.LatLng(30.6224191372523, 138.72777426242828),
new google.maps.LatLng(30.622251254355135, 138.72789764404297),
new google.maps.LatLng(30.62193729058848, 138.7273102402687),
new google.maps.LatLng(30.622377711635124, 138.72697496414184),
new google.maps.LatLng(30.622410416071524, 138.72704201936722)
];
// ポリゴンのオプションを設定
var polygonOptions = {
path: points,
strokeWeight: 2,
strokeColor: "#ff0000",
strokeOpacity: 0.5,
fillColor: "#ff0000",
fillOpacity: 0.3,
title:"ポリゴン"
};
// ポリゴンを設定
var polygon = new google.maps.Polygon(polygonOptions);
polygon.setMap(mapObj);
// クリック処理・吹き出しのコメント設定
google.maps.event.addListener(polygon, 'click', function() {
new google.maps.InfoWindow({
content: '品川testホテル<br>〒141-0001<br>東京都品川区',
maxWidth : 200,
position: new google.maps.LatLng(30.622401694889774, 138.72735120224)
}).open(mapObj);
});
//polygonのみ最初から吹き出しを表示させる（擬似的にクリックイベントを発生させる）
google.maps.event.trigger(polygon,'click');
});
//-->
</script>
【CSS】
#gmap {
width: 630px;
height: 300px;
margin-left: 30px;
border: #ccc 1px solid;
}
※緯度・軽度は正確ではありません。申し訳ありません。
※地図の前後にはfloatが掛かったコンテンツがあります。（clearfixで解除済み）
※専門用語はよく分からないので、出来るだけ分かるように記載頂けると幸いです。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ご回答ありがとうございます。 ？？？ よくわからないのですが・・・ 実は昨夜、見てみました時には、標準の状態で地図上に幾つもの四角い写真が表示されてしまい、「その他・・・」の中の「写真」にチェックを入れてみると今度はその四角い写真以外に小さな写真もたくさん表示されてしまい、大きな写真はそのまま残っておりました。 そこでまた「写真」のチェックを外すと今度は小さな写真だけが消えて大きな写真は地図上にいすわってしまう、という状態でいくらやっても写真が地図から消えませんでした。 ところが今、「地図だけですが・・・」ということですので再度見てみましたら今度はそのようなことはなく、ただ、地図だけの表示になっており、写真は出ていませんでした。 よくわかりませんがおそらくＧｏｏｇｌｅのシステムエラーではなかったのか、と思われます（そもそも、上記のリンクは私が意図していた場所でさえもありませんでした。 ですので再度、手動で昨日の地図を引いてみましたら上記の説明のように写真も表示されませんでした）。 そのようなわけで、自然解決となりました。 ありがとうございました。