Google マップ コンテナが 100% の幅と高さで表示されないのはなぜですか?

Google Maps Container DIV の幅と高さを 100% に設定する方法

Google Maps API v3 をロードして div に表示しようとすると、幅と高さの両方を 100% に設定しているにもかかわらず、地図が表示されない状況。指定した HTML コードは次のとおりです。

<code class="html"><!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;">...</div></code>

この問題を解決するには、Google マップ コンテナ div のすべての親コンテナの幅が 100% に設定されていることを確認することが重要です。さらに、Google マップ コンテナを含む #content div の幅と高さを明示的に絶対値に設定する必要があります。

この問題に対処する更新された CSS コード スニペットは次のとおりです。

<code class="css">body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; /* Set absolute width here */
  height: 100%; /* Set absolute height here */
}</code>

これらの変更を行うことで、Google マップ コンテナの DIV の幅と高さを 100% に設定し、意図したとおりにページ全体をカバーできるようになります。

以上がGoogle マップ コンテナが 100% の幅と高さで表示されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。