Erledigt - Google Maps im Fluid Design

[lachender_engel]

Hallo, Zusammen.
Ich erstelle gerade eine Seite im Fluid Design. Der Inhalt passt sich flüssig, prozentual, zur Größe des Browser (Viewport) an. Das erste Mal muss ich jedoch auch eine Google-Map einbauen und habe bisher keine Lösung gefunden, dass sich diese auch flüssig, als im Verhältnis zur gesamten Seite, anpasst.
Kennt jemand das Problem und kann mir einen Tipp oder gar eine Lösung geben?
Idealer Weise ist diese Lösung ohne JS. Mit nehme ich zur "Not" aber auch ;-)
Vielen Dank vorab für die Mühe einer Antwort!

 

[DaKKK]

Hi,

wie bindest du Google Maps ein? Kannst du mal den Code posten? Manchmal sind fixe Breiten und Höhen definiert.

LG DaKKK

 

[lachender_engel]

wie bindest du Google Maps ein? Kannst du mal den Code posten? Manchmal sind fixe Breiten und Höhen definiert.

Es gibt mehrere Möglichkeiten. Entweder direkt mit der API, Unter Verwendung von JavaSkript, oder dem Embedded-Link von Maps direkt.
Egal wie, es sind immer feste Breiten und Höhen angegeben. Daher "fließt" die Map auch nicht mit.
Ich habe die Map testweise in einen DIV gefasst und diesem eine %-uale Breite gegeben. Der Maps-Aufruf erfolgt dann ohne Höhe und Breite. Doch die Map wird damit garnicht angezeigt.
Daher meine Frage hier, wie Ihr das macht.

 

[ebene11]

Eine nette Methode ist der Weg über das object-Element, welches absolut und ein umgebendes Element (z.B. ein div), welches relativ positioniert wird. Die 'Höhe' des div, also der Platz für die Map, wird über einen Innenabstand eingestellt (Verhältnis von Breite zu Höhe), könnte z.B. so aussehen:

<div class="map">
<object id="map" data="hier-die-mapdaten"></object>
</div>

.map {
position: relative;
padding-bottom: 50%;
height: 0;
overflow: hidden;
}

#map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Der Wert für padding-bottom ist natürlich nach Belieben zu wählen - 100% entspricht einem Quadrat, 50% einem Rechteck im Verhältnis 2:1 usw. (so das umgebende Element 100% breit ist).

 

[lachender_engel]

Eine nette Methode ist der Weg über das object-Element,...

Vielen Dank für den Tipp. Das Element so einzusetzen kannt ich noch nicht. Und, es funktioniert ;-)