Google Maps responsive

  • Hallo zusammen,


    irgendwie habe ich eine Blockade. Ich habe Google Maps in eine Webseite integriert und möchte sie nun über Media-Querys responsive machen. Die Struktur ist in eine Div gebettet, das eine Classe "maps" hat.

    <div class="maps">

    <iframe src="https://www.google.com/maps/embed? usw. ... </iframe>

    </div>

    Ich möchte, dass die eingebettete Map sich bei kleinen Bildschirmen, z.Bsp. @media(max-width: 900px){ }, so verkleinert, dass sie die ganze Bildschirmbreite mit einem Padding von 15px einnimmt.

    Jetzt probiere ich schon ewig rum, habe auch schon im Web gegooglet und wenig probate Ratschläge erhalten. Kann mir jemand helfen?

  • Meinst du jetzt das der iframe die ganze Breite einehmen soll ,oder der Inhalt des iframes die ganze breite des iframes einnehmen soll?

    Du kannst ja auch einen iframe haben der nur halb so groß wie die Seite?

    Oder beides auf volle Breite ,so das es aussieht als wenn es kein iframe wäre?

  • Das Problem besteht eigentlich nur darin, dass ein IFrame Breite und Höhe als Formatierung vorgegeben haben muss...

    also etwa sowas

    Code
    .maps iframe {
       width: 900px;
       height: 500px;
    }

    Dann kommt der Punkt, an dem die 900px zu breit werden - und wie du es schon richtig machst, kommt dann die @media-Query.

    Das Festlegen der Breite sollte dann mit vw erfolgen... width: calc(100vw - 30px)

    Die Leerzeichen müssen in der Formel drin bleiben, sonst funktioniert das nicht

    und für die Höhe muss dann das Seitenverhältnis, dass du mit dem Ursprungs-IFrame hattest, ... 900x500... zur Berechnung genutzt werden.

    In diesem Fall ist als die Höhe 0,56 * Breite.

    Das geht dann wieder mit calc zu berechnen... height: calc(calc(100vw - 30px) * 0.56);

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!