Google Maps Kartenansicht für Contao

Kapitel 25

Google Maps für Contao

F Modul unterstützt Google Maps und integriert es nahtlos in die gewohnte Contao Umgebung. Für alle die sich mit dem F Modul auskennen, hier ein schnell durchlauf:

Zuerst erstellen wir ein Backend Modul. Während wir das Backend Modul erstellen, wählen wir die erforderlichen Paletten aus:

  • Adressfeld
  • Geo-Koordinaten
  • Marker (Icon)

Danach erstellen wir ein Wrapper und ein paar Datensätze. Alles wie gehabt.

Neu: Wir müssen jedem unserem Datensätze eine "Vollständige Adresse" zuweisen, aus dieser Adresse werden automatisch Geo-Koordinaten erzeugt.

Als nächstes erstellen wir ein Frontend Modul: F Modul > Listenansicht. Dort aktivieren wir die Kartenansicht und füllen die entsprechenden Felder aus. Dieses FE Modul binden wir auf einer unserer Seiten ein und das wars!

Zur Google Maps Demo Seite

Google Maps Paletten auswählen

Paletten auswählen

Seit F Modul v1.5 gibt es optionale Paletten. Dazugehören auch Paletten/Felder, die für Google Maps notwenig sind. Wenn wir ein Backend Modul erstellen, müssen wir bei Backend Paletten gewünschte Paletten freischalten.

Geo-Koordinaten eingeben

Geo-Koordinaten eingeben

Damit unser Datensatz in der Google Map sichtbar ist müssen wir eine Adresse definieren. Aus dieser Adresse werden automatisch Geo-Koordinaten erzeugt. Wir können auch die Geo-Koordinaten eingeben ohne der Adresse.

Google Maps Kartenansicht erstellen

Google Maps Kartenansicht erstellen

Als nächstes erstellen wir eine gewöhnliche F Modul Listenansicht, wie bis her. Dort aktivieren wir die Kartenansicht.

Eine Erklärung zu den Feldern:

Geo-Koordinaten:

Wir müssen ein Kartenzentrum definieren. Es reicht wenn wir einfach das Land oder die Stadt eintragen, in dem unsere Datensätze zu finden sind. Aus dem Kartenzentrum werden automatisch die Geo-Koordinaten erzeugt.

Map Template auswählen:

Wir können ein eigenes Template erstellen. Das fm_map_location Template ist eine script Tag dort können wir unsere Optionen eintragen.

Zoom-Faktor:

Hier können wir unseren Zoom-Faktor eintragen.

Marker anzeigen:

Wenn wir eine Kartenansicht erstellen, sollte die Marker aktiviert werden. Wenn wir die Marker (Icon) Palette ausgewählt haben, können wir jedem Datensatz ein eigenen Marker zuweisen. Wenn wir den Standard Marker ändern wollen, können wir die fm_map_location Template überschreiben.

Info Box anzeigen:

Wenn wir die Info Box aktivieren, wird beim Klick auf ein Marker eine entsprechende Info Box angezeigt. Das Template für die Info Box finden wir im fm_map_location.

Eigene Adressfelder erstellen

Eigene Adressfelder erstellen

Wir können das Standard Adressfeld überschreiben. Dazu erstellen wir eine eigene Palette mit folgenden Feldern.

  • Textfeld: address_street
  • Textfeld: address_addition
  • Textfeld: address_location
  • Textfeld: address_zip
  • Einfache Auswahl: address_country

Sobald wir unsere eigene Adress Palette definiert haben, können wir die Standart Palette deaktivieren.