Google Maps und display:none

[Sukrams]

Moin,

ich habe bei mir eine Google Map, die über slideToggle() eingeblendet wird und daher standardmäßig auf display:none steht. Ich hab ein wenig recherchiert, dass Google Maps damit Probleme hat und man das mit google.maps.event.trigger(map, 'resize'); abfangen kann (hier z. B.)

Was mir jetzt aber unklar ist, wo muss ich das für Contao aufrufen? Gehört das ce_dlh_googlemaps_default-Template oder woanders hin?

Viele Grüße
Markus

[Andreas]

Der resize müsste eigentlich dann getriggert werden, wenn du ihn benötigst, d.h. wahrscheinlich wenn der slideToggle startet oder fertig ist. Musst du mal ausprobieren.

Also muss er nicht unbedingt ins ce_dlh_googlemaps_default, sondern kann dorthin, wo du deinen slideToggle ausführst. Wenn du die slideToggle-Events auch im Script für die googlemaps empfangen kannst, dann kann es natürlich auch dorthin.

Nützlich ist es zu wissen, wie du in der Konsole der Dev-Tools Variablen überprüfen kannst, z.B. so

/* JS */
if(console && console.log) {
  console.log('hello world', myVar);
}

[Sukrams]

Der resize müsste eigentlich dann getriggert werden, wenn du ihn benötigst, d.h. wahrscheinlich wenn der slideToggle startet oder fertig ist. Musst du mal ausprobieren.

Also muss er nicht unbedingt ins ce_dlh_googlemaps_default, sondern kann dorthin, wo du deinen slideToggle ausführst. Wenn du die slideToggle-Events auch im Script für die googlemaps empfangen kannst, dann kann es natürlich auch dorthin.

Ah verstehe. Wenn ich die in den Slidetoggle stecke und die variable der Map nehmen (die von der ID) geht es auch. Nur leider wird die Map nicht auf dem Marker zentriert... Hat wohl leider noch ein paar mehr Probleme, mit dem display:none...

Nützlich ist es zu wissen, wie du in der Konsole der Dev-Tools Variablen überprüfen kannst, z.B. so

/* JS */
if(console && console.log) {
  console.log('hello world', myVar);
}

Den Zusammenhang verstehe ich jetzt leider gerade nicht. inwiefern muss ich die Variablen überprüfen?

[Andreas]

Schau mal in die neueste Version der dlh_googlemaps, da müsste auch Code drin sein, wie du den Marker zentriert bekommst. Der zentriert nämlich jetzt automatisch beim Window-Resize-Event.

console:
Wenn du z.B. einen Event von slideToggle überwachst und etwas machen möchtest, wenn der Event eintritt, kannst du dieses Snippet dort einfügen und in der Konsole eine Meldung ausgeben lassen, um zu testen, ob der Event tatsächlich ausgeführt wird und ob Variablen, welche du benutzen möchtest dort auch wirklich zur Verfügung stehen.

[Sukrams]

Muss ich für das Verschieben noch etwas einstellen? Habe das Update gerade mal durchgeführt, konnte so in den Einstellungen aber nichts finden.

Aber das mit der Konsole hat mir so schon geholfen, so kann man ja viel einfacher raus finden, ob was da ist. Jetzt weiß ich jedenfalls wo mein Problem liegt, bzw. wie die Karte falsch generiert wird: Die Karte hat eine Größe von 500x200 Pixel. ist vom Marker aber auch um die 500 Pixel nach links verschoben, sodass der Marker erst erscheint, wenn man dem.gm-style eine Positionierung von left: 500px und top:200px geben würde. Hat da vielleicht jemand Lösung? Einfach die Abstände geben, hilft auch leider nicht, da dann die ganze Karte verschoben wird.

[Andreas]

In der Map wird das im Template so gemacht

google.maps.event.addDomListener(window, 'resize', function() {
  var center = gmap2.getCenter();
  google.maps.event.trigger(gmap2, 'resize');
  gmap2.setCenter(center);
});

Die gleichen 3 Zeilen, welche hier beim Window-resize-Event ausgeführt werden, müssten dann auch bei deinem slideToggle-Event ausgeführt werden.

[Sukrams]

funktioniert leider auch nicht. kann das sein, dass das mit dem Map-IDs zusammenhängt? Ich habe das Gefühl, dass das zwei paar Schuhe sind. Wenn ich das direkt im Template anspreche, funktioniert leider der komplette Klick-Event nicht mehr.

Schade, dass Google da wohl so Probleme hat :/

Habe jetzt aber eine, wenn auch unschöne (Zwischen)-Lösung gefunden, indem ich den Kartenausschnitt ein wenig angepasst habe, sodass der Ausschnit mit dem Marker jetzt wieder in etwa zentriert ist.

[Andreas]

gmap2 musst du natürlich anpassen, das ist ja nur ein Beispielcode, anhand dessen du sehen kannst, wie es funktionieren sollte. Der Code ist bereits der fertig generierte Code aus einer Contao-Installation im FE. Im Template werden die Variablen ja dynamisch mit PHP erstellt, sodass dort in diesem Beispiel im FE dann gmap2 herauskam.

[Sukrams]

Moin,

ich sitze wieder vor dem Problem. hab den Code im Template so angepasst, dass der eigentlich den resize auch beim klicken machen soll. Wenn ich das erste Mal drauf klicke, bleibt die Karte so wie sie ist (also nicht da), klicke ich dann drauf, erscheint im zusliden noch der Marker, klicke ich nun ein 3. Mal drauf, erscheint nur ein Fragment der Karte: Bildschirmfoto 2016-11-14 um 16.10.31.png

Codetechnisch sieht es so aus:

$('.trigger').click(function() {
		var center = gmap<?=$this->map['id'];?>.getCenter();
 
        google.maps.event.trigger(gmap<?=$this->map['id'];?>, 'resize');
        gmap<?=$this->map['id'];?>.setCenter(center);
	});

Viele Grüße

Markus

[Andreas]

Um das zu untersuchen, müsstest du einen Link zu der Seite zeigen. Ich vermute, dass der click event auf dein Element .trigger zu früh kommt. Richtig wäre es einen onComplete event des Sliders zu benutzen.

[Sukrams]

Ich hab den Fehler bei mir gefunden. Sobald ich alles in $(function()) gepackt habe, geht das nicht. mach ich das ohne (auch nicht mit load, o.ä). gehts. Seltsam.

Viele Grüße
Markus