Ergebnis 1 bis 23 von 23

Thema: googlemaps -> Responsive?

  1. #1
    Contao-Fan
    Registriert seit
    03.01.2011.
    Beiträge
    260

    Standard googlemaps -> Responsive?

    Hallo,

    ist es irgendwie möglich diese Erweiterung reponsive zu machen?

  2. #2
    Contao-Nutzer Avatar von plusx
    Registriert seit
    19.01.2010.
    Ort
    Kassel
    Beiträge
    141

    Standard

    Eigentlich sollte das doch im CSS reichen?
    iframe, object, embed{max-width: 100%;}
    Beste Grüße
    Sebastian

  3. #3
    Contao-Fan Avatar von electricarts
    Registriert seit
    22.07.2010.
    Ort
    Georgsmarienhütte
    Beiträge
    381

    Standard

    Genau das Problem habe ich heute auch.

    @plusx: Das wäre schön, wenn das reichen würde, tut es aber nicht. Es gibt ein jQuery Plug-In, aber es funktioniert bei mir nach dem schnellen Einbau nicht. Ich forsche mal weiter …

    Viele Grüße


    Mario

  4. #4
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard

    Doch. Genau das reicht völlig aus um Googlemaps Karte responsive zu machen. Ich habe keinerlei JS gebraucht. Ein einfaches width:100% genügt.

  5. #5
    Contao-Fan Avatar von electricarts
    Registriert seit
    22.07.2010.
    Ort
    Georgsmarienhütte
    Beiträge
    381

    Standard

    Hast Du dlh_googlemaps verwendet, oder per iFrame eingebunden?

  6. #6
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard

    Ich hab die Extension verwendet.

  7. #7
    Contao-Fan Avatar von electricarts
    Registriert seit
    22.07.2010.
    Ort
    Georgsmarienhütte
    Beiträge
    381

    Standard

    Welchem Element hast Du denn die 100% gegeben? Bei mir werden die 100% vom Inline-Style (das was in der Extension als Breite eingetragen werden muss) überschrieben.

  8. #8
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard

    Du kannst in der Extension doch auch % Angaben machen?! Da habe ich einfach 100% Breite und 100% Höhe angegeben.

    Außerdem kannst du diese Werte durch ein simples !important überschreiben.

  9. #9
    Contao-Fan Avatar von electricarts
    Registriert seit
    22.07.2010.
    Ort
    Georgsmarienhütte
    Beiträge
    381

    Standard

    Das kann ich. Aber dann „fällt“ die Karte in der Höhe zusammen. Mit border sehe ich gerade noch einen schmalen Streifen (4px) und ohne border ist die Karte weg. Irgendwo habe ich da wohl noch einen Fehler drin. Denn bei Dir geht es ja mit Extension.

  10. #10
    Contao-Urgestein
    Registriert seit
    07.07.2009.
    Beiträge
    4.107

    Standard googlemaps -> Responsive?

    Ja wenn du der höhe 100% gibst musst du auch allen vorfahrelementen die selbe höhe geben. ich würde dir empfehlen die höhe via css mit important zu überschreiben

  11. #11
    Contao-Fan Avatar von electricarts
    Registriert seit
    22.07.2010.
    Ort
    Georgsmarienhütte
    Beiträge
    381

    Standard

    Ja, mit !important hat es geklappt. Danke!

    Das Seitenverhältnis verändert sich zwar (d. h. die Höhe bleibt unverändert) und der Marker zentriert sich erst nach dem Seitenreload, aber damit kann ich gut leben.


    Viele Grüße


    Mario

  12. #12
    Contao-Fan
    Registriert seit
    03.01.2011.
    Beiträge
    260

    Standard

    Bei mir geht es leider nicht.

    Wenn ich in der Extension und im Inhaltselement width und height auf 100% setze, wird die Map nicht mehr angezeigt.
    Gebe ich eine Feste Größe (500 x 500px) in px an und versuche diese über

    .mod_dlh_googlemaps
    {
    width:100%!important;
    height:100%!important;
    }


    zu überschreiben, dann bleibt es bei 500 x 500px.

    Wo habt ihr was eingetragen?

  13. #13
    Contao-Fan Avatar von electricarts
    Registriert seit
    22.07.2010.
    Ort
    Georgsmarienhütte
    Beiträge
    381

    Standard

    Ich habe nur

    Code:
    #dlh_googlemap_1 {
    	width: 100% !important;
    }
    benutzt.

    Mit height: 100% (mit oder ohne !important) fällt die Karte wieder zusammen.


    Viele Grüße


    Mario

  14. #14
    Contao-Nutzer
    Registriert seit
    03.09.2010.
    Ort
    Goslar
    Beiträge
    195
    Partner-ID
    7212

    Standard

    Der Ausschnitt sowie die Marker positionieren sich aber nicht neu wenn man zum Beispiel den Browser verkleinert.
    Da muss man mit JS nachbessern.

  15. #15
    Contao-Fan Avatar von electricarts
    Registriert seit
    22.07.2010.
    Ort
    Georgsmarienhütte
    Beiträge
    381

    Standard

    @Kim Das sagte ich ja. Nach einem Seitenreload passt es. Die wenigsten werden nach dem Aufruf der Seite das Browserfenster in der Größe verändern.

    Die JS Lösung wäre mir auch lieber gewesen, aber bei mir lief sie nicht. Für die iFrame Einbindung der Maps gibt es einige Lösungen, aber ich wollte hier die Extension einsetzen.


    Viele Grüße


    Mario

  16. #16
    Contao-Nutzer
    Registriert seit
    03.09.2010.
    Ort
    Goslar
    Beiträge
    195
    Partner-ID
    7212

    Standard

    Zitat Zitat von electricarts Beitrag anzeigen
    @Kim Das sagte ich ja. Nach einem Seitenreload passt es. Die wenigsten werden nach dem Aufruf der Seite das Browserfenster in der Größe verändern.

    Die JS Lösung wäre mir auch lieber gewesen, aber bei mir lief sie nicht. Für die iFrame Einbindung der Maps gibt es einige Lösungen, aber ich wollte hier die Extension einsetzen.
    Habe es nicht getestet aber schau mal auf http://snipplr.com/view/69431/center...rowser-resize/

  17. #17
    Alter Contao-Hase Avatar von xkoy
    Registriert seit
    23.07.2010.
    Ort
    Mount Maunganui, New Zealand
    Beiträge
    1.034

    Standard

    Hi,

    hat das mal jemand getestet mit dem Zentrieren, mit dem JS Schnipsel?

    Danke

  18. #18
    Contao-Nutzer Avatar von djo
    Registriert seit
    30.01.2011.
    Ort
    Waldshut-Tiengen
    Beiträge
    210

    Standard

    Hallo zusammen,

    wo müsste der Code eingefügt werden?

    Liebe Grüße,
    Daniel
    Geändert von djo (13.04.2013 um 02:07 Uhr)

  19. #19
    Contao-Nutzer
    Registriert seit
    19.10.2012.
    Beiträge
    3

    Standard

    Ich habe mich dem auch mal angenommen und hab mal den setCenter Script getestet.

    Diesen sollte man in dem jeweiligen Template anbringen. Ich habe in meinem Fall die Map als Module eingebunden und folgenden Script innerhalb des Tempaltes eingebunden.

    In der Datei mod_dlh_googlemaps.html5

    Hinter
    PHP-Code:
    if(window.gmap<?php echo $this->map['id']; ?>_dynmap){
            gmap<?php echo $this->map['id']; ?>_dynmap(gmap<?php echo $this->map['id']; ?>);
        }
    Habe ich folgenden Code eingefügt
    PHP-Code:
    var center;
        function calculateCenter() {
            center = gmap<?php echo $this->map['id']; ?>.getCenter();
        }
        google.maps.event.addDomListener(gmap<?php echo $this->map['id']; ?>, 'idle', function() {
            calculateCenter();
        });
        google.maps.event.addDomListener(window, 'resize', function() {
            gmap<?php echo $this->map['id']; ?>.setCenter(center);
        });
    Damit lässt sich die eine einfache Markierung neu zentrieren. Wie es bei mehreren Markierungen aussieht habe ich noch nicht getestet.

    Für mich der einzige Nachteil der bleibt ist die Höhenberechnung, die habe ich in keinem Fall bis jetzt von ihrer statischen Größe abbringen können, also leider immer noch eine Pixel angabe.

  20. #20
    Contao-Nutzer
    Registriert seit
    19.10.2012.
    Beiträge
    3

    Standard

    Eine kleine Möglichkeit bietet CSS3 da doch noch um die Höhe der Karte auch noch zu beinflussen.

    Meine Mediaquery angaben für die Höhen der Karte sehen wie folgt aus

    PHP-Code:
    @mediaquery (min-width1200px) {
    .
    dlh_googlemap {
    width100% !important;
    height400px !important;
    }
    }
    @
    mediaquery (min-width768px) and (max-width979px) {
    .
    dlh_googlemap {
    width100% !important;
    height300px !important;
    }
    }
    @
    mediaquery (max-width767px) {
    .
    dlh_googlemap {
    width100% !important;
    height200px !important;
    }
    }
    @
    mediaquery (max-width420px) {
    .
    dlh_googlemap {
    width100% !important;
    height150px !important;
    }

    Geändert von taskrider (19.04.2013 um 12:05 Uhr)

  21. #21
    Contao-Nutzer Avatar von chorleider
    Registriert seit
    29.12.2010.
    Ort
    Bad Camberg
    Beiträge
    16

  22. #22
    Contao-Nutzer Avatar von Coda
    Registriert seit
    18.08.2010.
    Ort
    Am Schreibtisch
    Beiträge
    32

    Standard

    Eine kleine Ergänzung zu dem Code von taskrider:

    Problem: Wenn man auf dem Smartphone die Orientation ändert (Landscape zu Portrait oder umgekehrt) verschiebt sich der Mittelpunkt und die Karte ist nicht mehr zentriert. Mit folgender kleinen Zusatzeile wird das Problem behoben ('google.maps.event.trigger'... s.u.).

    Hier noch mal die Zusammenfassung:

    Änderungen in der Datei mod_dlh_googlemaps.html5 bzw. ce_dlh_googlemaps.html5
    Abhängig davon, ob man die Karte als Modul oder Artikel einsetzt.

    Hinter:
    PHP-Code:
    if(window.gmap<?php echo $this->map['id']; ?>_dynmap){
            gmap<?php echo $this->map['id']; ?>_dynmap(gmap<?php echo $this->map['id']; ?>);
        }
    Folgender Code:
    PHP-Code:
        var center;
        function calculateCenter() {
            center = gmap<?php echo $this->map['id']; ?>.getCenter();
        }
        google.maps.event.addDomListener(gmap<?php echo $this->map['id']; ?>, 'idle', function() {
            calculateCenter();
        });
        google.maps.event.addDomListener(window, 'resize', function() {
            google.maps.event.trigger(gmap<?php echo $this->map['id']; ?>, 'resize');    
            gmap<?php echo $this->map['id']; ?>.setCenter(center);
        });

  23. #23
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.706
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Danke für die Recherche und die Lösung mit dem JS-Snippet. Funktioniert bisher sehr gut.

    Hier noch eine Alternative zum CSS, wenn man keine Breakpoints möchte, sondern dass die Map immer ein bestimmtes Seitenverhältnis einnimmt.

    Breite und Höhe auf 100% stellen und dann im CSS
    PHP-Code:
    .ce_dlh_googlemaps {
      
    padding-bottom56.25%; /* 16:9 */
      
    positionrelative;
    }
    .
    dlh_googlemap {
      
    positionabsolute;

    Die Prozentangabe von padding-bottom bestimmt das Seitenverhältnis, welches man so berechnet:
    Beispiel für 16:9
    9/16 = 0,5625 => 56.25%
    Beispiel für 4:3
    3/4 = 0,75 => 75%

    Genutzt wird hier der Umstand, dass padding-top oder padding-bottom den prozentualen Wert in Relation zur Breite des Elements setzen.

    Ein Element, welches beispielsweise eine Breite von 960px (und ohne Inhalt eine Höhe von 0px hätte), bekommt durch padding-bottom:10% ein vertikales Padding von 96px, was dann im Endeffekt auch die Höhe des Elements ist.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •