Warum wird mein Google Maps-Container nicht mit 100 % Breite und Höhe angezeigt?

So stellen Sie die DIV-Breite und -Höhe des Google Maps-Containers auf 100 % ein

Beim Laden von Google Maps API v3 und dem Versuch, es in einem Div anzuzeigen, kann es vorkommen, dass ein Situation, in der die Karte nicht sichtbar ist, obwohl sowohl Breite als auch Höhe auf 100 % eingestellt sind. Der von Ihnen bereitgestellte HTML-Code lautet wie folgt:

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

Um dieses Problem zu beheben, muss unbedingt sichergestellt werden, dass die Breite aller übergeordneten Container des Google Maps-Container-Divs auf 100 % eingestellt ist. Darüber hinaus muss die Breite und Höhe des Div #content, das den Google Maps-Container enthält, explizit auf absolute Werte festgelegt werden.

Hier ist ein aktualisiertes CSS-Code-Snippet, das das Problem behebt:

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

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

Durch diese Änderungen können Sie die Breite und Höhe des Google Maps-Containers DIV auf 100 % festlegen und dafür sorgen, dass er wie vorgesehen die gesamte Seite abdeckt.

Das obige ist der detaillierte Inhalt vonWarum wird mein Google Maps-Container nicht mit 100 % Breite und Höhe angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!