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

100% のサイズで Google マップ コンテナの DIV サイズ設定の問題を解決する

Google マップを Web ページに埋め込む場合、次のことが難しい場合があります。利用可能なスペースを完全に占有するコンテナ DIV を実現します。この問題は、ユーザーがコンテナ DIV の幅と高さの両方のプロパティを 100% に設定しようとした場合に発生し、マップが非表示になります。

原因：

表示するにはDIV 内の地図の場合、Google マップには有限のスペースが必要です。 100% のディメンションを割り当てると、DIV は親コンテナのディメンションに準拠するように指示されます。親コンテナ自体がページ全体を占めるように明示的に設定されていない場合、DIV はより小さいサイズに縮小され、マップが非表示になります。

解决方案：

この問題を解決するには、すべての幅が 100% である親コンテナのチェーンを確立する必要があります。これにより、マップのコンテナ DIV に、その内容を展開して完全に表示するのに十分なスペースが確保されます。さらに、マップの最小の高さを提供するために、マップのコンテナ DIV の高さプロパティに数値 (例: 700px) を割り当てます。

例代：

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

div#content {
  width: 100%;
  height: 100vh;
}

div#map_canvas {
  height: 700px;
  width: 100%;
}</code>

本文、HTML、およびコンテンツの DIV を幅と高さ 100% に設定すると、ページ全体をカバーするコンテナが作成されます。次に、map_canvas DIV が 700px の高さを維持しながらコンテンツ DIV を埋めます。このアプローチにより、マップが常に表示され、意図したスペースを占めることが保証されます。

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