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.
Einen Kommentar schreiben
22.01.2015 von Nofear
Leider erkennt die aktuellste Version von Contao die Verlinkungen mit href="javascript:void(0);" nicht.
Das System verlangt im href eindeutige Adresse.
22.01.2015 von Daniel
Hallo Nofear,
hast du's schon mal mit einer Raute "#" als Linkziel probiert? Im Endeffekt kann als Ziel auch die aktuelle Seite verlinkt sein - SEO mal dahin gestellt. Du müsstest im obigen JS-Code innerhalb des Click-Event-Handlers ein
return false;
zurück geben.ext_gmap<?php echo $element['id']; ?>_marker.addEventListener('click', function() {
gmap<?php echo $element['id']; ?>_infowindow.open(gmap<?php echo $this->map['id']; ?>);
return false;
});
Daniel
17.02.2015 von NofeaR
Hallo Daniel,
die Verlinkung habe ich jetzt über HTML-Code hingekriegt. Also wie du beschrieben hast href="javascript:void(0);"..
Aber die aktuelleste dlh_googlemaps möchte deine JavaScript Code nicht annehmen. Da passiert leider nichts.
17.02.2015 von NofeaR
Ok, hatte was übersehen.
Es ist nicht mehr $element['id'] sondern $this->element['id']
Datei -> dhl_marker.html5
Geänderter Code:
var ext_gmap<?php echo $this->element['id']; ?>_marker = document.getElementById("gmap<?php echo $this->element['id']; ?>_marker");
if (ext_gmap<?php echo $this->element['id']; ?>_marker != null) {
ext_gmap<?php echo $this->element['id']; ?>_marker.addEventListener('click', function() {
gmap<?php echo $this->element['id']; ?>_infowindow.open(gmap<?php echo $this->map; ?>);
});
}
Es läuft, vielen Dank!
18.02.2015 von gmodesignz
NofeaR oder Daniel,
also bei mir passiert bisher auch gar nichts wenn ich den Code einfüge. Weder wenn ich ihn bei "dlh_googlemaps" einfüge, noch bei "dhl_marker.html5"...
Bzw bei dhl_marker.html5 hab ich keine Ahnung wo es hingehören sollte...
Soll der Code einfach so eingefügt werden, oder muss noch etwas deklariert werden?
Für eine kurze Info wäre ich Mega-Dankbar!
18.02.2015 von gmodesignz
Ich habe es doch noch gelöst bekommen. Habe die richtige Stelle im "dhl_marker.html5" gefunden.
Mein eigentlicher Fehler war dass ich das X in "gmapX" nicht durch die Map-ID ersetzt habe.
Danke für die Anleitung, und die Korrekturen! Gotta love the developer scene ;-)
19.02.2015 von gmodesignz
Falls jedoch einer von euch eine Herausforderung sucht:
Wo muss ich denn ansetzen wenn ich auf klick auch erreichen will dass der verlinkte Marker zentriert wird, und evtl der Zoom der Karte verändert wird?
03.07.2015 von Martina
Danke fürs Teilen! Hat mir gerade sehr geholfen :-)
Bei mir funktionierts allerdings nur, wenn die Links im gleichen div liegen, wie die googlemap (also nicht bei map im #main und die Links im #left). Aber egal, ich habe es mit css zurechtgebogen ;-)
27.08.2015 von Florian
Ich habe mich auch exakt an die Anleitung gehalten aber es will nicht funktionieren. Muss das Template dhl_marker.html5 auch kopiert und bearbeitet werden? Wenn ja, an welcher Stelle?