Hallo liebes Forum,
mein erster Beitrag hier und gleich geht es ans Eingemachte. ;-)
Zum Inhalt:
Ich würde auf der Seite https://seezeit.com/wohnen/wohnanlagen/ gern eine Google Maps API v3 - Karte 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 (und so sieht das dann aus: http://www2.pic-upload.de/img/31088306/Screenshot_2016-06-27-15-09-32.png).
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 (siehe hier: http://www2.pic-upload.de/img/31087940/Maps_Api_Falsche-Kartenhhe.png). 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 (ungefähr so: http://www2.pic-upload.de/img/31088273/Screenshot_2016-06-27-15-09-32RICHTIGEDARSTELLUNG.png). 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.