Google Maps responsive in Webseiten einbinden

Marcel Am 10.12.2013 veröffentlicht Lesezeit etwa 1:24 Minuten

googlemaps-karteeinbetten

Die neuen Google Maps ermöglichen seit geraumer Zeit bereits das Einbetten per HTML-Code in eine beliebige Webseite: Dazu muss lediglich der gewünschte Kartenausschnitt geladen werden, der dazugehörige Code lässt sich dann anzeigen, indem ihr auf das Zahnrad-Symbol unten rechts klickt und dort den Punkt „Karte einbetten“ auswählt. Soweit, so gut. Problem für die vielen Webseiten, welche bereits auf ein respsonsive Webdesign (also ein Design, das sich automatisch per Media Queries an die unterschiedlichen Geräte beziehungsweise an den unterschiedlichen Viewports anpasst) setzen: Die eingebetteten Karten sind nicht flexibel, sondern verbleiben in der angegeben Größe.

responsive-google-maps

Doch es gibt einen kleine Umweg, welcher es eben ermöglicht, dass sich auch die eingebetten Karten an die Größe des Viewports anpassen – und das sogar in Echtzeit, sprich auch bei einer Größenänderung des Browserfensters. Fangen wir einmal mit dem originalen Code zum einbetten von Google-Maps-Kartenausschnitten an, für den ich eine fixe Größe von 600 x 400 Pixeln angegeben habe:

<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=URLblabla" width="600" height="400" frameborder="0"></iframe>

Was machen wir nun? Wir packen erst einmal einen Div-Container mit der Klasse „google-maps“ um eben diesen iFrame, dazu setzen wir zwei CSS-Angaben in unserem Stylesheet ein, welche eben dafür sorgen, dass sich der Div-Container immer an die Breite der Webseite anpasst, der iFrame wird dann eben genau darin platziert. Sieht im Grunde so aus:

<div class="google-maps">
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=URLblabla" width="600" height="450" frameborder="0"></iframe>
</div>

Eigentlich eine ganz einfache Sache, welche die eingebundenen Kartenausschnitte nun eben responsive anzeigt. Wer es testen möchte: Drüben bei Digital Inspiration gibt es einmal ein Beispiel mit dem unbearbeiteten Code (nicht responsive) und ein Beispiel mit dem zusätzlichem Code (responsive). Wird doch direkt mal eingebunden.

Quelle und Bild DigitalInspiration

Artikel teilen

Kaufempfehlung*

  • Sony Xperia Z5 Smartphone (5,2 Zoll (13,2 cm) Touch-Display, 32 GB interner Speicher, Android 5.1) schwarz
  • Neu ab EUR 379,00, gebraucht schon ab EUR 196,90
  • Auf Amazon kaufen*