googlemaps -> Responsive?

[ElMariachi]

Hallo,

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

[plusx]

Eigentlich sollte das doch im CSS reichen?
iframe, object, embed{max-width: 100%;}

[electricarts]

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

[andreasisaak]

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

[electricarts]

Hast Du dlh_googlemaps verwendet, oder per iFrame eingebunden?

[andreasisaak]

Ich hab die Extension verwendet.

[electricarts]

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.

[andreasisaak]

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.

[electricarts]

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.

[andreasisaak]

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

[electricarts]

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

[ElMariachi]

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?

[electricarts]

Ich habe nur

#dlh_googlemap_1 {
	width: 100% !important;
}

benutzt.

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


Viele Grüße


Mario

[Kim]

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

[electricarts]

@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

[Kim]

@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/

[xkoy]

Hi,

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

Danke

[djo]

Hallo zusammen,

wo müsste der Code eingefügt werden?

Liebe Grüße,
Daniel

[taskrider]

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

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

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.

[taskrider]

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

@mediaquery (min-width: 1200px) {
.dlh_googlemap {
width: 100% !important;
height: 400px !important;
}
}
@mediaquery (min-width: 768px) and (max-width: 979px) {
.dlh_googlemap {
width: 100% !important;
height: 300px !important;
}
}
@mediaquery (max-width: 767px) {
.dlh_googlemap {
width: 100% !important;
height: 200px !important;
}
}
@mediaquery (max-width: 420px) {
.dlh_googlemap {
width: 100% !important;
height: 150px !important;
}
} 

[chorleider]

Ich empfehle diesen Beitrag:
http://blog.kulturbanause.de/2012/10...ive-webdesign/

[Coda]

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:

if(window.gmap<?php echo $this->map['id']; ?>_dynmap){
        gmap<?php echo $this->map['id']; ?>_dynmap(gmap<?php echo $this->map['id']; ?>);
    }

Folgender 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);
    });

[Andreas]

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

.ce_dlh_googlemaps {
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}
.dlh_googlemap {
  position: absolute;
} 

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.