Google Maps responsive in Beiträge einbinden

Ja, Google Maps lassen sich sehr gut in eigene Artikel mittels iframe einbinden. Doch leider ist das nicht responsive… Hier habe ich einen netten kleinen Kniff gefunden.

Um den iframe Code erzeugst Du einen Div Container der Klasse „gm“. Dann fügst Du einfach folgenden Schnipsel in Deine CSS Datei ein.

Ähnlich kann man das dann auch mit YouTube Videos und anderen Dingen machen… Die 75% geben im übrigen das Seitenverhältnis an und stehen für 4:3. Bei anderen Formaten kann man auch das Seitenverhältnis berechnen… ((Breite/Höhe)*100)


Hier einmal ein Google Maps Beispiel:

Erst einmal als Code:

Und hier als Ansicht:

Variante:

Will man lediglich einmalig so etwas einbauen, oder hat man als Redakteur nicht die Möglichkeit, etwas in die CSS Datei einzufügen, kann man statt der CSS Klassen auch einfach Style Elemente verwenden. Das sieht dann so aus:

Auch mit Openstreetmap funktioniert das ganz wunderbar:

Größere Karte anzeigen