Eingebettete Karten innerhalb einer Seite haben viele Vorteile. Doch die Übersicht fängt an zu leiden, wenn zu viele Marker in einer Karte vorhanden sind. Abhilfe schaffen kann da eine Liste mit allen Einträgen. Ein Klick, und schon öffnet sich die Infoblase des passenden Markers.

Dieser Artikel entspricht einem Update meines ersten, im Oktober 2010, veröffentlichten Artikels zum gleichen Thema. Seitdem hat sich jedoch einiges geändert. Die hier gezeigten Änderungen gelten für Contao 3.x, dlh_googlemaps 1.1.x und die Google Maps API 3.

Das Prozedere, um einen Marker von außerhalb der Karte anzusprechen, hat sich seitdem zum Glück stark vereinfacht.

Die Aufgabe

Eingebettet wird eine Google Map mit mehreren Markern. Neben der Karte gibt es eine Liste mit Links zu diesen. Das Ziel ist nun, mit einem Klick auf den Link die entsprechende Infoblase zu öffnen.

Die Links erstellen

Jeder Link in der Liste benötigt eine ID, über die er angesprochen werden kann. Der Einfachheit halber werden die IDs wie das Marker-Objekt benannt, die dlh_googlemaps erzeugt. Im nächsten Absatz des Artikels sollte dieses Vorgehen ersichtlich werden.

<ul>
  <li><a href="javascript:void(0);" id="gmapX_0_marker" title="Auf der Karte anzeigen">Marker 1</a><li>
  <li><a href="javascript:void(0);" id="gmapX_1_marker" title="Auf der Karte anzeigen">Marker 2</a><li>
  <li><a href="javascript:void(0);" id="gmapX_2_marker" title="Auf der Karte anzeigen">Marker 3</a><li>
  ...
</ul>

gmapX markiert dabei den Index der angelegten Google Map. Ist es die erste, wird dabei - erwartungsgemäß - gmap1. Die zweite Zahl entspricht dem Index des Markers, beginnend ab 0.

Das Template anpassen

Eine Karte kann via Modul oder direkt als Inhaltselement eingebunden werden. Je nachdem, welche Variante man benutzt, muss man eines der beiden Templates in sein Templateverzeichnis kopieren:

• mod_dlh_googlemaps.html5 (für die Nutzung eines Moduls)
• ce_dlh_googlemaps.html5 (direktes Inhaltselement)

Für XHTML-Doctypes einfach das entsprechende Pendant nutzen.

Da der Zugriff auf das Marker-Objekt nur innerhalb der gmapX-Methode möglich ist, muss nun an entsprechender Stelle das Template angepasst werden. Wir erinnern uns an die Aufgabenstellung: Die Infoblase soll geöffnet werden. Der richtige Code befindet sich ab Zeile 105 ff.

In der Zeile 120 des Templates befindet sich der Funktionsaufruf zum Öffnen der Info. Diese nutzen wir ebenfalls und fügen folgende Zeilen in das Template, bspw. in Zeile 123:

var ext_gmap<?php echo $element['id']; ?>_marker = document.getElementById("gmap<?php echo $element['id']; ?>_marker");
if (ext_gmap<?php echo $element['id']; ?>_marker != null) {
  ext_gmap<?php echo $element['id']; ?>_marker.addEventListener('click', function() {
    gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
  });
}

In der ersten eingefügten Zeile zeigt sich nun auch der Grund, warum wir die IDs der Links in der Liste wie die Marker-Objekte genannt haben. Wir nehmen einfach die Logik der Erweiterung, um einen Klick Handler für die "externen" Links zu definieren.

Eine Abfrage, ob das HTML-Element mit der ID auch wirklich vorhanden ist, ergänzt den eingefügten Code. Mehr ist an der Stelle nicht zu ändern.

Demo

Auf www.taxi-goebel-bz.de wird diese Umsetzung bereits erfolgreich umgesetzt.