Wer auf seiner Seite eine Google Maps-Karte mit mehreren Einträgen hat, der möchte diese auch mit einem Link ansprechen können. Ein eigenes Template und etwas PHP helfen hier weiter.

Für dlh_googlemaps 0.1.5! Version 1.0.0 wurde grundlegend überarbeitet.

Wie schon in meinem letzten Beitrag zum Thema erwähnt, müssen die Marker per Javascript vor dem Aufruf des Moduls gesetzt werden. Sollen sie per Link angesprochen werden, muss der gesamte Javascript-Code allerdings in ein eigenes Template ausgelagert werden. Schließlich wird PHP dazu benötigt.

Dieses muss im Templateverzeichnis von Contao abgelegt werden. Per Inserttag, z.B. { {file::marker_config.tpl} } (ohne Leerzeichen), wird das Template dann in Contao eingebunden, geeigneterweise in einem HTML-Content Element. Das Template behinhaltet den Javascript-Code für die Definition der einzelnen Marker. Ausführliche Beschreibungen findet ihr hier.

Sind die Marker soweit definiert, geht es an das Setzen der Links:

<a href="?marker=1">Link zu Marker 1</a>
<a href="?marker=2">Link zu Marker 2</a>

In unserem Beispiel übergeben wir per GET über die URL die Variable marker. Ist die Karte in einer anderen Seite eingebunden, muss diese zusätzlich als Ziel mit angegeben werden. Hier sollten in jedem Fall die Contao-eigenen Platzhalter (Inserttags) benutzt werden, um späteren Änderungen vorzubeugen:

// Inserttags werden ohne Leerzeichen benutzt
<a href="{ {link_url::ID} }?marker=1">Link zu Marker 1</a>

ID im Inserttag muss nur noch mit der ID der zu verlinkenden Seite ersetzt werden. Im Template marker_config.tpl machen wir uns nun an die Auswertung der URL. Noch vor der Markerdefintion fragen wir per PHP die per GET gesendeten Informationen ab:

<?php
  if ($this->Input->get('marker'):
  ...
  endif;
?>

<script type="text/javascript">
<!--
  mapdata = new Array();
...
-->
</script>

Wichtig: Die in den Contao-Templates verfügbare Input-Klasse ist hier das Mittel der Wahl zur Abfrage des GET-Parameters. Die Klasse ist im Prinzip mit der globalen $_GET-Variablen in PHP gleichzusetzen, erspart uns aber Arbeit bei der Überprüfung und sichert sie ab.

Ein bisschen zusätzlicher Schutz schadet aber trotzdem nicht:

<?php
  if ($this->Input->get('marker'):
    $marker = settype(strip_tags($this->Input->get('marker')), 'integer');
  endif;
?>

Mit settype zwingen wir den Wert der Variablen $marker auf integer. Mehr brauchen wir in diesem Beispiel nicht, da marker eher als Flag gedacht ist. Zusätzlich dazu entfernen wir mit strip_tags eventuell eingeschmuggelte HTML- und PHP-Tags.

Wenn nun auf den ersten Link geklickt wird, soll sich die "Sprechblase" des ersten Markers nach dem Neuladen der Seite öffnen. Diese Funktion fügen wir folgenderweise in das Template ein:

<?php
  if
    ...
  endif;
?>

<script type="text/javascript">
<!--
  mapdata = new Array();
  ...
  <?php if ($marker && $marker == 1): ?>mapdata['dlh_googlemap_ID']['marker'][0]['autoinfo'] = true;<?php else: ?>mapdata['dlh_googlemap_ID']['marker'][0]['autoinfo'] = false;<?php endif; ?>
-->
</script>

Der Parameter autoinfo ist für das Einblenden der Blase nach dem Laden der Seite verantwortlich. Ist er auf true gesetzt, öffnet sie sich automatisch.

Wichtig: Die entsprechenden Angaben im obigen Beispiel müssen mit den richtigen Attributen ersetzt werden. dlh_googlemap_ID mit der ID des Google Maps-Moduls und ['marker'][0] mit dem richtigen Index.

Für den zweiten Link setzen wir analog dazu folgendes:

<?php if ($marker && $marker == 2): ?>mapdata['dlh_googlemap_ID']['marker'][1]['autoinfo'] = true;<?php else: ?>mapdata['dlh_googlemap_ID']['marker'][1]['autoinfo'] = false;<?php endif; ?>

Dies ist nur ein einfaches Beispiel, wie Marker in einer Google Map unter Contao angesprochen werden können. Ich freue mich natürlich jederzeit über Feedback, was sonst alles noch möglich ist.