index,follow

[Update] Contao & dlh_googlemaps: Marker per Link ansprechen

14.01.2014, 13:58 von Daniel || (Kommentare: 9) || Mit anderen teilen

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.

Contao und dlh_googlemaps: Marker per Link ansprechen

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.

Schlüsselwörter zu diesem Beitrag

« Zurück

Hier schreibe ich,

Ich

Daniel Erlinger, als selbstständiger Webdesigner über die Themen Webdesign, Contao, Shopsysteme, Kreatives, Neues und alles, was sonst noch dazu passt.

Vernetzt

Twitter
Mister Wong
Contao Community

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?



Nutze Deinen Gravatar.


Bitte rechnen Sie 1 plus 5.