Googleマップがウェブサイト上で正しく表示されないという問題を修正しようとしています。 See Screenshot of correct and false rendering。Google map v3 apiがブートストラップで正しく表示されない(タブは含まれません)
私はあなたが今、私が絶望しているので、問題がどこから来ているのかを知ってほしいです。レンダリングされていない領域に
- リスト項目地図部分的にロードされた左上隅
- リスト項目をダブルクリックは、第2のマップを作成します。それは私が見る行動がある誰かのための可能な解決策の素敵なコレクション:) だ最悪の場合ページが複数回再ロードされている場合は最初に小さなマップ
- リスト項目の下にすぐに、マップが表示されている時間の約10〜30%が
ソリューションを試みたが、これまでのところ成功せず修正: - 同時に
マニュアルトリガーボタン
とリサイズイベントにマップセット中心のサイズを変更アイドル状態google.maps.event.addListenerOnce(map, 'idle', function() {google.maps.event.trigger(map, 'resize');});
を受信した後、地図のサイズを変更マップgoogle.maps.event.trigger(map, 'resize')
- をリサイズ
文書の準備ができてから地図を初期化する
$(document).ready(function() {initialize();});
親divの幅&高さを検出し、唯一の初期化後10秒
setTimeout(initialize, 1000);
までのsetTimeoutマップを初期化するのに十分な大きもし
割り当て親divの幅&高さマップ・キャンバスに
を
親divの幅を&に設定します。GM-スタイル
CSS:
CSSをキャンバスに100%と幅&高さを割り当てます:PX &の組み合わせで幅&高さを割り当て
CSSをキャンバスにピクセルで幅&高さを割り当てキャンバスに100%
CSS:変更のmax-width
#map-canvas img {max-width: none !important;}
CSS:変更のmax-width
#map-canvas img {max-width: none !important;}
思考&観察:
問題は、私はそれはキャンバスがすでに初期化の直前に持って 読み込み時間に関係していると信じていますこれは散発的です右の寸法であり、完全に見える(すなわち、隠しタブなし) Googleロゴのような追加のボタンは、間違いや連絡先などを報告し、適切なサイズで表示されます。 GoogleマップAPI v3の問題、Googleマップ:私は、これはGoogleマップは、それはまだ
キーワードは、解決策を見つけるために使用される右の寸法を検出しながら、マップ自体のために、何らかの理由でフルキャンバスにレンダリングできないことを意味信じていますレンダリングの問題、Googleマップ左上隅、GoogleマップBootsstrap問題
私はあなたがhttps://apptest.voiceoffriends.com/user.html
は、任意のヒントを事前にいただきありがとうございます見てみたい場合には、可能な限りのHTMLコードを簡素化しようとしていますかバグを修正する方法に関するアプローチ。
(引数が不足している)あなたの博士モールをありがとうございました!コンソール上のGoogleマップでエラーメッセージが表示されないため、これは問題ではないと思いました。 – Michael
私は人々がコンソールなしでデバッグできる日を覚えています...警報はまだ素晴らしい項目です..特にモバイルデザイン – Mayhem