一部のマップタイルはモバイルレイアウトでレンダリングされていません

Question

V3マップapiを使用してページにレンダリングされたGoogleマップがあります。すべて素晴らしいですが、何らかの理由で初期ビューのマップタイルがモバイルビューでレンダリングされません。それは580pxのブレークポイントで壊れますが、私はそれが問題を引き起こすように思える何か私のCSSで見つけることができません。固定ディメンションからマップコンテナのパーセンテージに移動しますが、固定ディメンションで常に試行していますが、問題は解決しません。ページはこちら：https://www.edenrift.com/Taste。

マップをパンして最初のビューの左側の領域を表示すると、タイルがレンダリングされていることがわかります。最初のビューのタイルはレンダリングされていないことがわかります。また、ズームボタンも同じブレークポイントでどのように邪魔になるかに注意してください。

Answer 1

ここで質問するときは、の問題を再現するために必要なすべてのコードをとしてください。ライブコードへのリンクではありません。コードが変更されたり、URLがもう有効でないと、他の読者にとっては役に立ちません。

@media screen and (max-width: 580px) img { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    float: none; 
    max-width: 100% !important; 
    height: auto; 
} 

、より具体的にmax-width: 100% !important;

それも、マップコントロールを台無しにされているとして、それはCSSの問題だ明らかです：次のルールは、あなたの問題を引き起こしている、と述べた

。