Antworten auf deine Fragen:
Neues Thema erstellen

Erledigt - Google Maps im Fluid Design

lachender_engel

Aktives Mitglied

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

Das Krümelmonster

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

Aktives Mitglied

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

Noch nicht viel geschrieben

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:

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

Code:
.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).
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben