Google Maps im Responsive Webdesign

google-maps-screenshot

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.

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

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%;	
}

Links zum Thema