Anzeige
Tutorialbeschreibung

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

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.

Bilder



 
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.

Bilder



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.

Bilder



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.

Bilder



 
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.

Bilder



 
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.

Bilder



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.

Bilder



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.

Bilder



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.

Bilder



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.

Bilder



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


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von studi
  • 11.08.2014 - 16:57

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

Portrait von MicroSmurf
  • 24.05.2014 - 13:02

Vielen Dank für den weiteren Teil.

Portrait von Steve007
  • 09.05.2014 - 19:54

Vielen r den weiteren Teil Deiner interessanten Reihe.

Portrait von Cherifa
  • 08.05.2014 - 11:56

Vielen Dank für dieses TUT - viele liebe Grüße


C.

Portrait von Kundentest
  • 03.05.2014 - 14:37

Herzlichen Dank für das Tutorial.

Portrait von rocking_sid
  • 03.05.2014 - 13:47

Vielen Dank für das sehr informative Tutorial!

Portrait von Caesarion2004
  • 03.05.2014 - 13:39

Vielen Dank für das interessante und informative Tutorial.

Portrait von BOPsWelt
  • 03.05.2014 - 12:27

Vielen Dank für diese klasse Tutorial Reihe! :-)

Portrait von Steve007
  • 22.03.2014 - 12:32

Vielen Dank für diesen weiteren Teil Deiner interessanten Serie.

Portrait von Caesarion2004
  • 21.03.2014 - 13:13

Vielen Dank für den sehr interessanten und informativen Teil der Reihe.

Portrait von MicroSmurf
  • 21.03.2014 - 13:10

Wieder mal sehr interessant. Danke.

Portrait von kw513143
  • 21.03.2014 - 12:46

Danek für all die Arbeit uns klüger zu machen

Portrait von rocking_sid
  • 21.03.2014 - 12:21

Vielen Dank für das interessante Video-Training!

Portrait von Dineria
  • 21.03.2014 - 10:23

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... :-)

Portrait von pixel_hunter
  • 21.03.2014 - 12:39

Ja, auch von meiner Seite Danke für die kurze und einfache Erklärung und vor allem Anregung!

Die Einbindung von google maps ist wohl auch sonst ganz einfach oder "einfach", je nach Wissensstand: http://www.youtube.com/watch?v=SCtB6a7sWuc

... Aber im Detail komplizierter, wenn man alle technischen, rechtlichen und perspektivischen Gesichtspunkte einschließen will, siehe etwa hier detailierter
https://developers.google.com/maps/faq?hl=de

Portrait von Ken_Barrow
  • 21.03.2014 - 10:16

Vielen Dank für den weiteren Teil.

Portrait von Kundentest
  • 21.03.2014 - 10:08

Herzlichen Dank für das weitere Video.

x
×
×