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*

  • Motorola Moto G4 Play Smartphone (12,7 cm (5 Zoll), 16 GB, Android, Dual-SIM) schwarz [Exklusiv bei Amazon]
  • Neu ab EUR 159,00
  • Auf Amazon kaufen*

7 Kommentare vorhanden

Erachte ich für keine gute Lösung, denn der Inhalt, den man zeigen will, rutscht beim Anpassen so oder so aus dem Sichtfeld.Da reicht es auch dem iFrame ne Breite von 100% zu geben, schaut in allen möglichen Kombinationen gut aus und bleibt vor allem mobil benutzbar, da die Höhe nicht so winzig wird. Schlank halten.

Habe bisher dem iFrame 100% gegeben. So wie hier auch schon erwähnt.
Hat jemand eine Lösung um auch den Karteninhalt zu skalieren?

Schreibe einen Kommentar

Schreibe eine Antwort

⚠ Mit dem Nutzen des Kommentarbereiches erklärst du dich mit der Datenschutzerklärung einverstanden.