これまで多くのウェブサイトで Google マップを使用してきましたが、これまで経験したことのない問題が発生しました。マップ ウィンドウは表示されていますが、マップ セグメントは左上からのみ表示され、それ以降 (ナビゲートしているときでも) は何も読み込まれません。ナビゲートされるウィンドウには、ビューポートの側面から押し出す内部オフセットがあるかのようです。誰がそれを引き起こしているのか知っていますか?
編集
ウィンドウのサイズを変更すると、マップが更新され、レイアウトが修正されることがわかりました。
マップは、javascript で表示される (および で非表示になるdisplay:none) タブに含まれています。タブ コンテナーは ajax を介して読み込まれ、読み込み時に loadMap 関数が呼び出されます。マップの作成を 1 秒遅らせる setTimeout 関数内に loadMap 関数を囲んで延期しようとしましたが、それでも同じです (修正するにはウィンドウのサイズを変更する必要があります)。
これは、マップ コンテナーが非表示になっているか、マップの作成時にディメンションがゼロの場合に発生する典型的な問題です。
通常の解決策は、次のいずれかを実行することです。
コンテナー要素が表示され、適切なサイズになるまで、マップの作成を延期します。または、
google.maps.event.trigger( map, 'resize' )マップが表示されるか、サイズが変更された後に呼び出します。このイベントは、地図に表示されるものの計算を再調整するように Maps API に指示します。
最初のオプションを使用して既に解決しているように思えますが、これは間違いなく 2 つの選択肢として優れています。非表示のマップの作成に時間を費やさないため、ページの読み込みが速くなります。マップのサイズが変更される可能性がある状況 (サイズ変更可能なウィンドウなど) がある場合は、それが発生したときにサイズ変更イベントをトリガーできます。
なぜ機能しないのかわかりませんが、タブが最初に開かれたときにのみマップ作成機能を実行するようにコードを変更しました。それはそれが正しく動作するようにします