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

[Peter Linzenkirchner]

Hallo Kevin, 

das hat mit TYPO3 erst mal nichts zu tun, dein Problem ist vermutlich eher HTML und CSS. 

iFrames sind nicht responsiv (also die Breite schon, aber die Höhe nicht - height 100% funktioniert bei iFrames nicht wie erwartet - mehr hierzu hier: http://stackoverflow.com/questions/5272519/how-do-you-give-iframe-100-height Erläuterung unter Punkt 23 bzw. hier http://www.w3schools.com/tags/att_iframe_height.asp für HTML5.). 

Das kann man also nur mit Tricks erreichen. Hier sind ein paar Beispiele, wie das prinzipiell funktioniert: 
http://maddesigns.de/responsive-iframes-2417.html
https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
https://benmarshall.me/responsive-iframes/
Das Grundprinzip funktioniert bei Google Maps auf die gleiche Art: 
https://blog.kulturbanause.de/2012/10/google-maps-im-responsive-webdesign/
etc. 
Hier ist was zum Ausprobieren: 
https://codepen.io/hubpork/pen/xriIz

Da es keine typischen TYPO3-Themen sind, sondern eben HTML/CSS, findest du das leichter mit der normalen Google-Suche als hier im Forum (Stichwort: responsive iFrame, responsive Google Map). 

Eine übliche Header-Höhe gibt es eigentlich bei TYPO3 nicht, das hängt vom verwendeten Template ab, und das wiederum hängt nur vom verwendeten CSS ab. Aber das Problem liegt wohl in der Höhenangabe des iFrames, siehe oben. 

Gruß
Peter


> Am 04.07.2016 um 03:48 schrieb Kevin Kohler <kevin.kohler at uni-konstanz.de>:
> 
> 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. ;-)
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german



--
Xing: http://www.xing.com/profile/Peter_Linzenkirchner
Web: http://www.typo3-lisardo.de
Facebook: http://tinyurl.com/lisardo-multimedia