Hallo,
ist es irgendwie möglich diese Erweiterung reponsive zu machen?
Hallo,
ist es irgendwie möglich diese Erweiterung reponsive zu machen?
Eigentlich sollte das doch im CSS reichen?
iframe, object, embed{max-width: 100%;}
Beste Grüße
Sebastian
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
Doch. Genau das reicht völlig aus um Googlemaps Karte responsive zu machen. Ich habe keinerlei JS gebraucht. Ein einfaches width:100% genügt.
Hast Du dlh_googlemaps verwendet, oder per iFrame eingebunden?
Ich hab die Extension verwendet.
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.
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.
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.
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
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
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?
Ich habe nur
benutzt.Code:#dlh_googlemap_1 { width: 100% !important; }
Mit height: 100% (mit oder ohne !important) fällt die Karte wieder zusammen.
Viele Grüße
Mario
Der Ausschnitt sowie die Marker positionieren sich aber nicht neu wenn man zum Beispiel den Browser verkleinert.
Da muss man mit JS nachbessern.
@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
Habe es nicht getestet aber schau mal auf http://snipplr.com/view/69431/center...rowser-resize/
Hi,
hat das mal jemand getestet mit dem Zentrieren, mit dem JS Schnipsel?
Danke
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)
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
Habe ich folgenden Code eingefügtPHP-Code:
if(window.gmap<?php echo $this->map['id']; ?>_dynmap){
gmap<?php echo $this->map['id']; ?>_dynmap(gmap<?php echo $this->map['id']; ?>);
}
Damit lässt sich die eine einfache Markierung neu zentrieren. Wie es bei mehreren Markierungen aussieht habe ich noch nicht getestet.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);
});
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.
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-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;
}
}
Geändert von taskrider (19.04.2013 um 12:05 Uhr)
Ich empfehle diesen Beitrag:
http://blog.kulturbanause.de/2012/10...ive-webdesign/
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:
Folgender Code:PHP-Code:
if(window.gmap<?php echo $this->map['id']; ?>_dynmap){
gmap<?php echo $this->map['id']; ?>_dynmap(gmap<?php echo $this->map['id']; ?>);
}
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);
});
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
Die Prozentangabe von padding-bottom bestimmt das Seitenverhältnis, welches man so berechnet:PHP-Code:
.ce_dlh_googlemaps {
padding-bottom: 56.25%; /* 16:9 */
position: relative;
}
.dlh_googlemap {
position: absolute;
}
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 in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)