Contao (Teil 36): Google Maps in die Webseite einbinden

Die Erweiterung, um die es nun geht, nennt sich dlh_googlemaps. Ausführliche Informationen zu dieser Extension findet ihr unter https://contao.org/de/extension-list/view/dlh_googlemaps.html.

Um die Erweiterung zu installieren, ruft ihr im Backend der Seite System>Erweiterungskatalog auf. Tragt in das Suchen-Feld dlh_googlemaps ein und bestätigt das mit Return. Anschließend klickt ihr bei dem Eintrag Google Maps Modul auf das Installieren-Symbol.




Das daraufhin angezeigte Dialogfenster wird mit Weiter bestätigt. Contao lädt die notwendigen Dateien herunter und installiert die Extension. Sobald die Meldung Aktion erfolgreich zu sehen ist, kann man das Fenster mit Weiter verlassen. Aktiviert anschließend im Dialogfenster Datenbank aktualisieren alle Kontrollkästchen und bestätigt das mit Aktualisierung. Damit ist die Installation der Erweiterung abgeschlossen.

Die Erweiterung einsetzen

Nach erfolgreicher Installation findet ihr im Backend unter Inhalte den neuen Eintrag Google Maps.




Folgt diesem Link und klickt in dem angezeigten Dialogfenster auf Neue Google Map. Daraufhin sind vergleichsweise viele Optionen zu sehen, von denen an dieser Stelle nur die wichtigsten vorgestellt werden. Entscheidend ist zunächst der Bereich Titel und Grundeinstellungen. Hier könnten die folgenden Daten eingetragen werden:

• Titel = Anfahrt
• Adresse für Geocoding = Kantstraße 120, 10625 Berlin
• Land = Deutschland
• Anzeigemaße Breite x Höhe* = 500 mal 400 Pixel
• Zoom-Faktor = 13

Das soll es an dieser Stelle zunächst gewesen sein. Übernehmt die Angaben mit Speichern und schließen. In dem daraufhin angezeigten Dialogfenster könnt ihr schon mal sehen, wie die Karte aussehen wird.

So wird die Karte eingebunden

Nachdem die Karte erstellt wurde, muss man diese natürlich noch an der gewünschten Stelle einfügen. Dafür gibt es zwei unterschiedliche Möglichkeiten:

• Als Frontend-Modul
• Als Inhaltselement

Beide Varianten werden in diesem Tutorial vorgestellt. So könnt ihr selbst entscheiden, wie ihr die Karten einbinden wollt. Um die nachfolgend beschriebenen Schritte auch praktisch nachvollziehen zu können, solltet ihr unter Layout>Seitenstruktur eine neue Seite anlegen, in der die Karte schlussendlich angezeigt wird. (Wie sich Seiten erstellen lassen, wurde in dieser Reihe bereits hinlänglich gezeigt, weswegen ich hier auf eine entsprechende Beschreibung verzichte).

Zunächst zur Frontend-Modul-Variante. Ruft Layout>Themes auf und klickt nacheinander auf Die Frontend-Module des Themes ID xx bearbeiten und Neues Modul. Als Titel könnt ihr Karte eintragen. Im Feld Modultyp wird Verschiedenes>Google Map eingestellt. Daraufhin sind zusätzliche Optionen zu sehen. Entscheidend ist der Bereich Google Map.




Aktiviert hier den Radio-Button der Karte, die angezeigt werden soll. Über die Optionen Zoom-Faktor und Anzeigemaße Breite x Höhe lassen sich die in der Kartenkonfiguration gemachten Einstellungen überschreiben. Wollt ihr keine Änderungen vornehmen, lasst ihr die Einträge leer.

Legt das Modul mit Speichern und schließen an. Nachdem das Modul erstellt wurde, muss man es noch einbinden. Das geschieht über Layout>Themes>Die Seitenlayouts des Themes ID xx bearbeiten. Klickt bei dem betreffenden Layout auf das Stiftsymbol. Entscheidend ist der Bereich Eingebundene Module.




Klickt dort auf eines der grünen Pluszeichen und stellt im linken Feld Karte [Google Map] ein. Im Feld daneben wird die gewünschte Position gewählt.




Mehr ist nicht nötig, das Ganze kann also direkt mit Speichern und schließen übernommen werden. Ein anschließender Blick ins Frontend der Seite liefert das gewünschte Ergebnis.

Die Karte als Inhaltselement

Wie bereits beschrieben, könnt ihr die Karte auch als Inhaltselement einbinden. Voraussetzung dafür ist natürlich eine entsprechende Seite. Gibt es diese, öffnet man Inhalte>Artikel. Ich gehe an dieser Stelle davon aus, dass bereits die Seite Anfahrt erstellt wurde, klicke also auf Anfahrt [Hauptspalte]. Folgt dem Link Neues Element, legt dessen Position fest und stellt als Elementtyp unter Include-Elemente den Eintrag Modul ein. In dem daraufhin angezeigten Auswahlfeld Modul wird Karte gewählt.




Ihr könnt jetzt noch die üblichen Modul-Optionen anpassen und die Einstellungen mit Speichern und schließen übernehmen. Auch das liefert im Frontend das gewünschte Ergebnis.

Weitere Optionen nutzen

Wie bereits beschrieben erlaubt das Modul euch zahlreiche weitere Anpassungen. So könnt ihr beispielsweise bestimmte Punkte in der Karte markieren. Möglich sind aber auch Infoblasen, Grafik-Überlagerungen und Street View. Wie einfach sich solch zusätzlichen Optionen verwenden lassen, zeigt das folgende Beispiel. Dabei wird der zuvor erstellten Karte eine Infoblase hinzugefügt. Dazu benötigt ihr die Geo-Koordinaten. Diese müsst ihr allerdings nicht selbst ermitteln, das erledigt Contao für euch beim Abspeichern der Karte automatisch. Wenn ihr euch die zuvor erstellte Karte in der Bearbeitungsansicht anseht, werdet ihr feststellen, dass in das Feld Geo-Koordinaten Werte eingetragen wurden.




Kopiert euch diese in die Zwischenablage, denn die benötigt ihr zum Anlegen der Sprechblase.

Öffnet nun die Karte über Inhalte>Google Maps und Anklicken des Stiftsymbols. Folgt im oberen Fensterbereich dem Link Neues Karten-Element. Nachdem die Position des Elements festgelegt wurde, geht es an dessen Konfiguration. Entscheidend ist dabei zunächst das Auswahlfeld Typ.




Denn darüber wird letztendlich bestimmt, um was für ein Element es sich handelt. Wenn ihr euch die Einträge anseht, werdet ihr feststellen, dass es durchaus einige verschiedene Varianten gibt. Stellt im aktuellen Beispiel den Eintrag Info-Sprechblase ein. Daraufhin werden zusätzliche Optionen eingeblendet. Tragt als Titel Hier finden Sie uns ein und aktiviert das Kontrollkästchen veröffentlicht. In das Feld Geo-Koordinaten fügt ihr die zuvor in die Zwischenablage kopierten Geo-Koordinaten ein.

Weiter geht es mit dem Feld Infoblase.




In dieses Feld gehört der Text, der in der Infoblase angezeigt werden soll. Das könnte beispielsweise die Adresse sein, die in der Karte markiert wurde. Mit Speichern und schließen kann das Ganze übernommen werden. Wenn ihr euch jetzt die Karte im Frontend der Seite anseht, ist dort tatsächlich die Infoblase zu sehen.

Und so könnt ihr der Karte auch alle anderen Elemente bei Bedarf hinzufügen. Das Vorgehen ist dabei immer dasselbe.