Zum Inhalt springen
Zur Hauptnavigation springen
Zum Footer springen
  • 10+ Jahre Erfahrung 

  • 900+ erfolgreiche Projekte

  • 300+ ★★★★★ Bewertungen

  • 20+ Experten, europaweit tätig

  • 2400+ Follower auf Youtube

Google Maps Karte responsive einbinden

zuletzt aktualisiert am 10. März 2024
Glühbirne auf einem Buch
Inhaber & Geschäftsführer von ithelps Digital. Seit 2013 beschäftigt er sich intensiv mit den Themen SEO & Online-Marketing.

Google bietet mit Google Maps die geniale Möglichkeit, eine Standortkarte in die eigene Website zu integrieren. Leider wird eine normal eingebundene Google-Maps-Karte aber nicht an die Größe des Endgerätes angepasst. Ich zeige dir, wie es dennoch funktioniert.


Google Maps Karte responsive einbinden in 2 Schritten 

Um eine Google Maps Karte responsiv auf einer Website einzubinden, sodass sie sich automatisch an die Bildschirmgrößen verschiedener Endgeräte anpasst, sind tatsächlich nur ein paar einfache Schritte notwendig. Diese Anpassung ist besonders wichtig, da immer mehr Nutzer Websites auf mobilen Geräten wie Smartphones und Tablets aufrufen. Eine Karte, die sich nicht anpasst, kann die Benutzererfahrung erheblich beeinträchtigen.

Schritt-für-Schritt Anleitung

1. Einbettung des iFrame-Codes in einen div-Container

Zunächst musst du den von Google Maps bereitgestellten iFrame-Code in einen zusätzlichen div-Container einbetten. Der iFrame-Code ist ein HTML-Element, das es dir ermöglicht, eine externe Webseite – in diesem Fall Google Maps – in deine eigene Webseite einzubinden. Durch das Einbetten in einen div-Container erhältst du die Kontrolle über die Darstellung der Karte durch CSS.

Ein Beispiel hierfür könnte so aussehen:

<div class="responsive_map">
    <!-- Hier kommt der iFrame-Code von Google Maps rein -->
</div>

Dabei ersetzt du den Kommentar mit dem tatsächlichen iFrame-Code, den du von Google Maps erhältst.

2. Hinzufügen von CSS für die Responsive-Funktionalität

Der nächste Schritt ist das Hinzufügen von CSS-Code, um die Karte responsiv zu gestalten. Dies bedeutet, dass die Karte ihre Größe ändert, um in das Container-Element zu passen, welches sich wiederum an die Größe des Browserfensters oder des Gerätedisplays anpasst.

Der notwendige CSS-Code sieht so aus:

.responsive_map {
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
}

.responsive_map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Dieser Code bewirkt, dass der div-Container (responsive_map) ein Verhältnis von 16:9 beibehält, was für die meisten Anwendungsfälle eine gute Wahl ist, da es dem üblichen Seitenverhältnis von Videos entspricht. Der iFrame wird so skaliert, dass er den gesamten Container ausfüllt. Du kannst das Seitenverhältnis ändern, indem du padding-bottom anpasst. Zum Beispiel würde padding-bottom: 75% ein 4:3 Verhältnis erzeugen.

Vorteile dieser Methode

  • Benutzerfreundlichkeit: Deine Website wird auf allen Geräten besser aussehen und einfacher zu bedienen sein.
  • Flexibilität: Du kannst das Seitenverhältnis der Karte leicht ändern, um es an deine Designanforderungen anzupassen.
  • Einfachheit: Diese Methode erfordert nur einfaches HTML und CSS, ohne dass JavaScript oder andere Bibliotheken benötigt werden.

Mit diesen Schritten stellst du sicher, dass deine Google Maps Karte auf allen Geräten gut aussieht und funktioniert. Diese Methode der responsiven Einbettung ist nicht nur auf Google Maps beschränkt, sondern kann auch für andere iFrame-basierte Inhalte verwendet werden, was sie zu einem wertvollen Werkzeug für Webentwickler macht.

 


Alles klar?

Solltest du noch Fragen zum Thema haben oder dir eine professionelle Unterstützung wünschen, dann melde dich bei uns. Schreibe eine E-Mail an Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein., rufe uns unter +43 1 353 2 353 an oder schicke uns deine Anfrage über unser Kontaktformular.

Beitrag teilen