Lightbox in Infoblase der googlemap

[kari]

Hallo,

ich bastele gerade an einer ziemlich umfangreichen Karte mit vielen Standorten. Bei den jeweiligen Markern soll sich eine Infoblase öffnen, die ich per inserttag mit content fülle. Das klappt soweit auch prima. Allerdings sind hier auch Bildergalerien enthalten, deren Bilder sich in einer Lightbox öffnen sollten. Leider funktioniert die Lightbox nicht. Das Bild wird einfach als Link geöffnet. jquery ist aktiviert und funktioniert bei den Galerien auf dem Rest der Seite auch prima.

Sicher hat es damit zu tun, dass es innerhalb der map geöffnet wird. Aber hat vielleicht jemand eine Idee, wie ich das Ganze trotzdem elegant mit einer Lightbox hinbekomme, in der man sich dann auch durch die Bilder klicken kann?

Hier mal zur Ansicht: http://www.boes-tiefbau.de/index.php...utz-karte.html

Ich hoffe sehr, dass jemand eine Idee hat. Danke schon mal.

Grüße
Kari

[Andreas]

Die Colorbox identifiziert die Links mit welchen sie interagieren soll anhand des Vorhandenseins des Attributes data-lightbox.
https://github.com/contao/core/blob/...rbox.html5#L12

Jetzt hast du da zwar dieses Attribut in den entsprechenden Links, aber dieses Element ist überhaupt nicht vorhanden wenn die Colorbox nach diesen Links sucht (DOMContentLoaded). Das Element (ich meine .gm-style) wird erst dynamisch erstellt, wenn du auf den Marker klickst. Die Colorbox weiß also nichts von diesen Links.

Solche APIs wie die Google-Map bieten aber HOOKs an, wo du einspringen kannst. Kenne ich jetzt nicht auswendig, aber das sind so Funktionen wie onInfoOpen: funtion(){} Das kannst du bei der Google-Map in den Optionen benutzen. Dort musst du dann der Colorbox nochmal sagen, dass es da nach Links suchen soll.

Edit: Kann sein, dass du den infowindow.addListener() benutzen kannst. Hatte ich hier mal erklärt. https://community.contao.org/de/show...l=1#post432308

[kari]

Vielen Dank erstmal. Leider funktioniert der infowindow.addListener() nicht.

Mit den Hooks kenne ich mich überhaupt nicht aus. Ist vielleicht jemand hier, der mir diesbezüglich weiterhelfen kann? Der Ansatz von Andreas klingt auf jeden Fall gut.

[Andreas]

Hab's mir nochmal angesehen. In dem anderen Thread wird etwas anderes erzielt, kannst du also vergessen.

Hier ein paar Links zum Thema
https://developers.google.com/maps/d...t/events?hl=de
https://developers.google.com/maps/d...owindows?hl=de

Um daran zu arbeiten ist es von Vorteil, wenn du das JS wellformed siehst. Dazu z.B. Das Addon "Web Developer" für FF installieren, dann

1. Informationen
2. JavaScript anzeigen
3. Alles einklappen
4. Eingebettetes JavaScript ausklappen
5. JavaScript verschönern

Du musst dich auf diese Blöcke konzentrieren

  google.maps.event.addListener(gmap1_0_marker, 'click', function() {
    gmap1_0_infowindow.open(gmap1);
  });
...
  google.maps.event.addListener(gmap1_1_marker, 'click', function() {
    gmap1_1_infowindow.open(gmap1);
  });
... 

Das öffnet das Infofenster (Infoblase). Danach kannst du dort mit der Colorbox nach den Links suchen. Versuche mal dort ein paar Objekte zu debuggen. Ich habe das alles nicht getestet, deswegen musst du da mal versuchen alleine was rauszufinden. Du musst den Code über das GoogleMaps Template ins FE bringen.

  google.maps.event.addListener(gmap1_0_marker, 'click', function(a, b, c) {
    gmap1_0_infowindow.open(gmap1);

    // DEBUG
    console.clear();
    console.debug('gmap1_0_infowindow: ', gmap1_0_infowindow);
    console.debug('this: ', this);
    console.debug('a: ', a);
    console.debug('b: ', b);
    console.debug('c: ', c);

  }); 

F12 und in der Konsole die Ausgabe ansehen wenn du auf einen Marker klickst.

ps HOOKs war auch die falsche Wortwahl von mir, Event-Listener wäre besser gewesen.

[kari]

Puuh ... da hast du mich jetzt ganz schön an meine Grenzen geführt.

Leider habe ich mein Problem so erstmal nicht lösen können. Vielleicht hat jemand anderes evtl. Bedarf und nimmt dich der Sache noch mal an.
Ich habe jetzt für die Projekte Unterseiten angelegt und sie über einen Button in der Infobox verlinkt. Ist für's SEO eh besser.

Danke noch mal für deine Mühe, Andreas.

Grüße
Kari

[Andreas]

Vielleicht hiflt es dir ein Stück weiter, wenn ich dir noch zeige, wann (wo) du nach den Links für die Colorbox suchen musst. (Alles ungetestet)

  google.maps.event.addListener(gmap1_0_marker, 'click', function() {
    gmap1_0_infowindow.open(gmap1);

    // jetzt nach den Links mit Attribut data-lightbox suchen, weil das Infofenster gerade geöffnet wurde
    $('a[data-lightbox]').map(function() {
      $(this).colorbox({
        // Put custom options here
        loop: false,
        rel: $(this).attr('data-lightbox'),
        maxWidth: '95%',
        maxHeight: '95%'
      });
    });

  });
...
  google.maps.event.addListener(gmap1_1_marker, 'click', function() {
    gmap1_1_infowindow.open(gmap1);

    // jetzt nach den Links mit Attribut data-lightbox suchen
    $('a[data-lightbox]').map(function() {
      $(this).colorbox({
        // Put custom options here
        loop: false,
        rel: $(this).attr('data-lightbox'),
        maxWidth: '95%',
        maxHeight: '95%'
      });
    });

  });
... 

Damit wird nochmal die ganze Seite abgesucht, also auch die, welche Colorbox schon kennt werden nochmal gefunden. Dürfte aber erstmal egal sein. Man könnte das noch optimieren, indem man nur innerhalb des Infofensters sucht. Dazu müsstest du den Selektor "a[data-lightbox]" ändern. Ich kenne den Selektor für das Infofenster jetzt grad nicht, müsste dann in etwa so aussehen ".infowindow a[data-lightbox]".

Und wenn du mehrere Infofenster hast, wäre es nicht so schön, wenn der Code für die Suche in jedem "Infofensterblock" stünde. Das sollte man dann als Funktion auslagern.

Der Code für die Suche ist der gleiche wie im Template j_colorbox https://github.com/contao/core/blob/....html5#L12-L20.