Google Maps im Responsive Webdesign
Nicht nur das Layout einer Website lässt sich mitunter schwierig für die mobile Darstellung optimieren, auch verschiedene Inhalte sorgen regelmäßig für Unmut. Nachdem ich bereits Lösungen für Tabellen, Bilder und Videos im Responsive Webdesign vorgestellt habe möchte ich nun das Snippet für den Einsatz von eingebetteten Google-Karten nachliefern.
Webdesign mit Photoshop CS6!
Mein Video-Training mit über 11 Stunden Laufzeit! Profi-Techniken für modernes Webdesign - mit zahlreichen Tipps für das mobile Web.
Jetzt bei Amazon bestellen!Container-Element für Google Maps
Zunächst müsst ihr das Code-Snippet von Google mit einem Container-Element umschließend:
<div class="responsiveContainer"> <!-- iframe-Code von Google Maps --> </div>
Anschließend fügt ihr folgenden Code in euer Stylesheet ein:
.responsiveContainer {
position: relative;
padding-bottom: 56%;
height: 0;
overflow: hidden;
}
.responsiveContainer iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Das war es auch schon. Ab sofort passt sich die Karte dem übergeordneten Element eures Layouts an, sollte zu wenig Platz zur Verfügung stehen.
Eine Demo-Seite findet ihr hier
Google Maps Infofeld ausblenden
In Google Maps wird automatisch eine Sprechblase mit der aufgerufenen Adresse angezeigt. Auf kleinen Bildschirmen nimmt diese Sprechblase leider oft zu viel Platz ein. Wenn ihr die Blase ausblenden möchtet, schaut euch meinen Artikel Google Maps Bubble deaktivieren an.
Container-Element für iframe, object & embed
Der Trick funktioniert übrigens nicht nur bei Google Maps, sondern bei allen Elementen die über iframe, object oder embed integriert wurden. Dazu müsst ihr das Snippet nur ein wenig anpassen.
.responsiveContainer {
position: relative;
padding-bottom: 56%;
height: 0;
overflow: hidden;
}
.responsiveContainer iframe,
.responsiveContainer object,
.responsiveContainer embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}