Google Maps: Infoblase CSS

[gm-team]

Liebe Gemeinde,

ich möchte gerne die Infoblase per CSS ansprechen.
Das funktioniert anscheinend nur über die übergeordnete Klasse gm-style mit Vererbung oder über gm-style-iw wobei ich auch die übergeordnete Klasse von gm-style-iw bräuchte.

Über gm-style div div div usw geht es auch nicht (abgesehen davon dass mir das nicht gefällt) da ich teilweise Kind-Elemente auf gleicher Ebene unterschiedlich ansprechen möchte.

Ich hab viel über den CSS Weg probiert, aber wirklich zufriedenstellend war jetzt keine Lösung. Eher unschöner murks.

Weiß jemand was ich tun kann um CSS Klassen bzw. ID's vergeben zu können?
Vielleicht hilft mir das Feld Ergänzende Parameter, aber ich verstehe leider nicht genau was ich wie hier eintragen kann.

Vielen dank.

[Andreas]

wobei ich auch die übergeordnete Klasse von gm-style-iw bräuchte.

Damit meinst du wohl den Selektor für das Elternelement. Der dürfte momentan so aussehen:

.gm-style > div:first-child > div:nth-child(4) > div:nth-child(4) > div:first-child {
  border: 5px solid red;
}

Das ist ja echt doof, dass da keine Klassen drin sind. War das nicht mal anders? Vielleicht findet man in den Docs auf Google was dazu. Auch mit JS ist das nicht so einfach aufzusetzen, weil die Blase erst gerendert wird, wenn man sie öffnet. Kann mir nicht vorstellen, dass Google da keine eigene Formatierungsmöglichkeit für anbietet, also mal in den Docs rumstöbern. Oder auch mal alternativ diese anderen Maps für Contao probieren - leaflet, con4gis_maps[3].

[gm-team]

Hallo Andreas,

danke dass du mir wieder weiterhilfst.

Ja ist tatsächlich unbequem dass da standardmäßig keine CSS Klassen mitkommen, bzw. nur spärlich.

Ich habe ein Tutorial gefunden wo recht ausführlich beschrieben wird wie man die einzelnen Teile per CSS/JS ansprechen kann.
Vielleicht hilfts ja zukünftig mal jemandem: http://en.marnoto.com/2014/09/5-form...nfowindow.html
Da wird auch - was ich besonders hilfreich finde - beschrieben wie man übergeordnete Teile (komplett ohne Klasse) ansprechen kann.

Die anderen Erweiterungen werde ich demnächst mal testen, in diesem Projekt haben wir uns bereits auf die Erweiterung festgelegt.

[Andreas]

Man kann z.B. im Template ce_dlh_googlemaps_default diese Zeilen

<?php
// Auto-generated map elements
foreach($this->map['elements'] AS $element) : echo $element['parsed']; endforeach; ?>

durch diese hier ersetzen.

<?php
// Auto-generated map elements
foreach($this->map['elements'] AS $element) : echo $element['parsed']; ?>
gmap<?= $element['id'] ?>_infowindow.addListener('domready', function() {
  var iw = document.querySelectorAll('.gm-style-iw');
  for(i = 0; i < iw.length; i++)
  {
    iw[i].parentNode.classList.add('iw-container');
  }
});
<?php endforeach; ?>

Das Elternelement hat dann die Klasse 'iw-container', mit der man dann alles darunter per CSS ansprechen kann.

[gm-team]

Super, danke für das Code Snippet.

Hab es jetzt beim Template ce_dlh_googlemaps_default.html5 eingebaut.

Die Klasse taucht jedoch nicht auf, ich prüfe gerade welche anderen Fehlerquellen hier noch reinspielen könnten.

[Andreas]

Gerade nochmal getestet, funktioniert. Ich hatte mich oben vertan, hatte es auch mit ce_dlh_googlemaps_default.html5 getestet.

Hast du wirklich den kompletten oberen Block gegen den unteren ausgetauscht? Hier ein Beispiel-CSS

.iw-container {
  border: 3px solid red;
}

Wenn nicht geht, müsstest du einen Link zur Seite zeigen.