[TYPO3-german] Responsive Google API Maps im Header einbinden funktioniert nicht richtig?

Kevin Kohler kevin.kohler at uni-konstanz.de
Mon Jul 4 03:48:20 CEST 2016


Hallo liebes Forum,

mein erster Beitrag hier und gleich geht es ans Eingemachte. ;-)

Zum Inhalt: 
Ich würde gern eine Google Maps API v3 - Karte im Header einer Seite einbauen, was soweit auch klappt.

Das Problem ist lediglich, dass das schöne Ding nicht responsiv ist, da die Karte z.B. auf Smartphones und anderen mobilen Endgeräten zu groß dargestellt wird, sodass man nicht mehr durch die Seite scrollen kann - stattdessen scrollt man nur noch die Karte selbst.
Außerdem wird die Karte falsch zentriert bzw. es wird nur ein Kartenausschnitt links vom eigentlich angegebenen Zentrum angezeigt, wobei die ganzen Marker dann außer Sicht sind.

Als Problemlösungsversuch habe ich schon ein iframe-Embed herangezogen und die Höhen- und Breitenwerte in 100% angegeben - allerdings auch ohne Erfolg, da die Karte dann viel zu niedrig angezeigt wird. 
Jedoch ist sie bei dieser Darstellung zumindest mal responsiv auf Smartphones, wenngleich ebenfalls viel zu klein.
Könnte es sein, dass die übliche Headerhöhe einfach zu klein definiert ist?

Mein Ziel wäre, die Karte so einzubinden, dass sie auf mobilen Endgeräten responsiv angezeigt wird und den richtigen Kartenausschnitt zentriert. Ideal wäre, dass die Karte so groß ist, dass man die Marker noch öffnen und auch zoomen kann, während man gleichzeitig auch durch die gesamte Seite scrollen kann.

Bislang habe ich es schon mit unzähligen HTML-Variationen, if-Schleifen für die Erkennung von Mobilgeräten, iframes etc. probiert, allerdings bislang ohne Erfolg. Im Google Entwicklerforum wurde mir dann geraten, mich mal an typo3-Spezialisten zu wenden.^^
Gibt es überhaupt eine adaquäte Lösung für das Problem?

Die SuFu habe ich ebenfalls schon bemüht, bin da allerdings nur darauf gestoßen, wie man normale Headerbilder responsiv einbindet (dies ist auf den anderen Seiten des Studentenwerks mit "normalen" Headerbildern auch kein Problem, nur die Karten zicken rum).

Vielen Dank im Voraus für das Lesen dieses Romans und mit den besten Grüßen,
Werwoelfchen (Kevin)

P.S.: Gern kann ich auch den kompletten HTML-Code hier reinposten, falls das sinnvoll ist.

P.P.S.: Ich habe auch Screenshots für alle Darstellungen, kann diese jedoch leider noch nicht posten weil ich noch 3 weitere Posts benötige. Liefere diese dann nach. ;-)


More information about the TYPO3-german mailing list