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

Eine Funktion, die immer mal wieder gebraucht wird, ist die Anzeige einer Karte aus Google Maps. Eine solche Karte ließe sich natürlich manuell einbinden. Für Contao gibt es allerdings eine passende Extension, die euch das abnimmt. Dabei lassen sich beliebig viele Karten an unterschiedlichen Stellen integrieren. Wie sich die Extension effektiv nutzen lässt, zeigt dieses Video-Training. Tatsächlich könnt ihr nämlich nicht nur einfach eine Karte in eure Seite einfügen, diese lässt sich auch noch komfortabel konfigurieren.
... übrigens findest du die komplette Serie hier: CMS Contao – Video-Tutorial für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!
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.
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.
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.
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.
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.
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.
Weitere Teile
- Tutorial: Contao (Teil 01): Das ist Contao
- Tutorial: Contao (Teil 02): Die lokale Installation
- Tutorial: Contao (Teil 03): Das erste Mal im Backend
- Tutorial: Contao (Teil 04): Die wichtigsten Grundeinstellungen vornehmen
- Tutorial: Contao (Teil 05): Perfekte Dateiverwaltung
- Tutorial: Contao (Teil 06): Seiten anlegen
- Tutorial: Contao (Teil 07): Ein Theme erstellen
- Tutorial: Contao (Teil 08): Frontend-Module einbinden
- Tutorial: Contao (Teil 09): Einen ersten Artikel schreiben
- Tutorial: Contao (Teil 10): Das Hauptmenü anlegen und einbinden
- Tutorial: Contao (Teil 11): Die Frontend-Ausgabe gestalten
- Tutorial: Contao (Teil 12): Den Haupt- und den Fußbereich gestalten
- Tutorial: Contao (Teil 13): Inhaltselemente (1)
- Tutorial: Contao (Teil 14): Inhaltselemente (2)
- Tutorial: Contao (Teil 15): Formulare anlegen
- Tutorial: Contao (Teil 16): Formularfelder einfügen
- Tutorial: Contao (Teil 17): Der Webseite eine Suchfunktion spendieren
- Tutorial: Contao (Teil 18): Die individuelle Suchfunktion
- Tutorial: Contao (Teil 19): Ein vertikales Menü aufbauen
- Tutorial: Contao (Teil 20): Ein horizontales Menü aufbauen
- Tutorial: Contao (Teil 21): Die Mitgliederverwaltung
- Tutorial: Contao (Teil 22): Notwendige Module für die Mitgliederverwaltung
- Tutorial: Contao (Teil 23): Den Login-Bereich komfortabler gestalten
- Tutorial: Contao (Teil 24): Einen Downloadbereich einrichten
- Tutorial: Contao (Teil 25): Benutzergruppen für das Backend anlegen
- Tutorial: Contao (Teil 26): Backend-Benutzer anlegen
- Tutorial: Contao (Teil 27): Die Zugriffsrechte festlegen
- Tutorial: Contao (Teil 28): Nachrichten schreiben
- Tutorial: Contao (Teil 29): Die Nachrichten im Frontend anzeigen
- Tutorial: Contao (Teil 30): Der persönliche Terminkalender
- Tutorial: Contao (Teil 31): Events im Frontend anzeigen
- Tutorial: Contao (Teil 32): Eine FAQ-Liste aufbauen
- Tutorial: Contao (Teil 33): Der perfekte Newsletter
- Tutorial: Contao (Teil 34): Newsletter im Frontend
- Tutorial: Contao (Teil 35): Den Funktionsumfang mit Extensions erweitern
- Contao (Teil 36): Google Maps in die Webseite einbinden
- Tutorial: Contao (Teil 37): Suchmaschinenoptimierung (1)
- Tutorial: Contao (Teil 38): Suchmaschinenoptimierung (2)
- Tutorial: Contao (Teil 39): Suchmaschinenoptimierung (3)
- Tutorial: Contao (Teil 40): Updates und Backups

Passend zum Inhalt empfehlen wir:
PHP Tutorial – objektorientierte Programmierung: Grundlagen & Praxis
Die Installation ist gut beschrieben, würde mich freuen, wenn man über die Einrichtung etwas mehr erfahren würde. So fehlt mir eine Beschreibung der restlichen Elemente neben der Info-Blase:
Markierung (ggf. mit Routing)
Linie
Polygon
Grafik-Überlagerung
Rechteck
Kreis
KML-Layer
Vielen Dank für den weiteren Teil.
Vielen r den weiteren Teil Deiner interessanten Reihe.
Vielen Dank für dieses TUT - viele liebe Grüße
C.
Herzlichen Dank für das Tutorial.
Vielen Dank für das sehr informative Tutorial!
Vielen Dank für das interessante und informative Tutorial.
Vielen Dank für diese klasse Tutorial Reihe! :-)
Vielen Dank für diesen weiteren Teil Deiner interessanten Serie.
Vielen Dank für den sehr interessanten und informativen Teil der Reihe.
Wieder mal sehr interessant. Danke.
Danek für all die Arbeit uns klüger zu machen
Vielen Dank für das interessante Video-Training!
Danke, interessante Sache - ich wüsste nun nicht mal, wie man das in HTML macht... Vermute aber mal, da braucht man auch nur die Werte in irgend einen speziellen Link-Tag setzen... :-)
Vielen Dank für den weiteren Teil.
Herzlichen Dank für das weitere Video.