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.
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
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.
Mache ich auch meistens so bei iFrames (YouTube, Google Maps etc.).
Bei YouTube ist das Seitenverhältnis ja nicht unwichtig, da verstehe ich obigen Weg auch.
Imho rutscht der Content nur dann aus dem Bereich, wenn der Browser nach dem Laden verkleinert oder vergrößert wird. Aber „wie oft passiert das schon“? (O-Ton Herr Hesse) ^.^
iFrames sollten so langsam mal aussterben…
Daher schrieb ich „beim Anpassen“. Wie gesagt, schlank halten und gerade bei dem Beispiel ist jede Zeile Code überflüssig, wenn es mit 100% getan ist. Aber jeder wie er mag.
Handhabe ich auch so, und hatte noch nie Probleme damit. (zbs. mit YouTube)
Habe bisher dem iFrame 100% gegeben. So wie hier auch schon erwähnt.
Hat jemand eine Lösung um auch den Karteninhalt zu skalieren?