Vereinsfinder in eine Webseite einbinden

Diese Anleitung zeigt, wie der Vereinsfinder in eine Webseite eingebunden wird – in die DJJV-Webseite genauso wie in andere Webseiten (Vereine, Landesverbände). Sie richtet sich an Redakteure – Programmierkenntnisse sind nicht nötig. Es gibt einen Einbettungsweg: ein kleiner Code-Schnipsel wird eingefügt, der Finder erscheint dann nahtlos im Seitenfluss (kein iframe). Aussehen und Einstellungen kommen aus einem Theme (Farbschema).

1. Den Finder auf eine Seite bringen

Dieser Code kommt auf die Seite (Beispiel mit dem DJJV-Standard-Theme):

Einbetten-Snippet (HTML)

<div id="djjv-vereinsfinder"></div>
<script src="https://vereinsfinder.djjv.de/wp-json/locations-map/v1/embed.js?theme=djjv"
        data-target="djjv-vereinsfinder" async></script>

In Typo3 einfügen

Seite im Typo3-Backend öffnen.
An der gewünschten Stelle ein neues Inhaltselement vom Typ „Reiner HTML-Code“ (bzw. „HTML“) einfügen.
Den Code hineinkopieren und speichern.

In einer (fremden) WordPress-Seite einfügen

Seite/Beitrag im Block-Editor öffnen.
Block „Individuelles HTML“ (englisch „Custom HTML“) hinzufügen.
Den Code hineinkopieren und veröffentlichen/aktualisieren.

Wichtig auf fremden Seiten: Der Kurzbefehl [locations_map] funktioniert dort nicht – er läuft nur auf der Instanz mit installiertem Plugin. Auf jeder fremden Seite nimmt man den embed.js-Code von oben.

2. Aussehen & Einstellungen: Themes

Farben, Schrift, Größe, Verhalten (Melde-Buttons, Filter-Sperre, Vorauswahl) und die Intro-Texte werden pro Theme eingestellt – nicht per CSS. Jede Einbettung wählt ihr Theme über ?theme=<slug>. Ändert man das Theme später im Backend, ändern sich alle Einbettungen automatisch mit.

So legst du ein Theme an (im Vereinsfinder-Backend, macht i. d. R. die DJJV-Administration): Einstellungen → Vereinsfinder → „Farbschemata (Themes)“ → „Theme hinzufügen“ → Namen und Slug vergeben → Farben, Schrift, Höhe/Breite/Zoom/Radius, Melde-Buttons, Filter-Sperre, Sportart-/Angebots-Vorauswahl sowie Intro-Texte einstellen → Speichern. Pro Theme gibt es die Buttons „URL kopieren“ und „HTML kopieren“.

Das DJJV-Standard-Theme (djjv) ist immer vorhanden, editierbar, aber nicht löschbar. Ohne ?theme= gilt es automatisch.

3. Einzelne Einstellungen per URL überschreiben (optional)

Jede Theme-Einstellung lässt sich zusätzlich an der Adresse überschreiben – URL-Werte schlagen das Theme. Mehrere mit & verbinden. Dieselben Namen funktionieren als Shortcode-Attribute.

Layout & Verhalten

Parameter	Wirkung	Beispiel
`theme`	Theme (Farbschema) wählen; leer = `djjv`	`theme=verein-blau`
`height`	Karten-Höhe in Pixel (min. 250)	`height=600`
`width`	Max-Breite in Pixel (leer/0 = volle Breite)	`width=900`
`zoom`	Start-Zoomstufe der Karte	`zoom=8`
`radius`	vorausgewählter Suchradius in km	`radius=50`
`show_actions`	Melde-Buttons: `1` = an, `0` = aus	`show_actions=0`
`lock_filters`	Filter-Auswahl sperren: `1` = ja	`lock_filters=1`
`categories`	Kategorien vorauswählen (Slugs, kommagetrennt)	`categories=nordrhein-westfalen`
`sports`	Sportarten vorauswählen (kommagetrennt)	`sports=ju_jutsu,bjj`
`offers`	Angebote vorauswählen (kommagetrennt)	`offers=kindertraining`
`intro_title`	Intro-Überschrift	`intro_title=Vereine%20in%20Berlin`
`intro_text`	Intro-Text (HTML erlaubt, URL-kodiert)	`intro_text=%3Cp%3E…%3C%2Fp%3E`

Sportarten (sports): ju_jutsu, jiu_jitsu, bjj, hanbo_jutsu

Angebote (offers): kindertraining, wettkampftraining, nicht_mit_mir, frauenselbstverteidigung, fit_sicher, inklusion

Farben & Schrift

Normalerweise über das Theme gesetzt; hier nur, falls du sie ausnahmsweise direkt an der Adresse überschreiben willst. Hex-Farben müssen URL-kodiert werden (# wird zu %23).

Parameter	Wirkung	Beispiel
`accent1`	Primärakzent (DJJV-Gelb-Slot)	`accent1=%230057b7`
`accent2`	Buttons/Distanz-Badge (DJJV-Rot-Slot)	`accent2=%23ffd700`
`text`	Textfarbe	`text=%23222222`
`bg`	Hintergrundfarbe	`bg=%23ffffff`
`surface`	Flächen (Boxen/Karten)	`surface=%23f5f5f5`
`border`	Rahmenfarbe	`border=%23cccccc`
`font`	Schriftfamilie	`font=Arial,sans-serif`

Shortcode-Alternative (nur auf WordPress-Seiten mit installiertem Plugin): [locations_map theme="djjv" radius="50" sports="bjj" lock_filters="1"] – gleiche Attribut-Namen wie die URL-Parameter.

4. Voraussetzungen für fremde Seiten (macht der Administrator)

Google-Maps-Freigabe: die jeweilige Domain muss in der Referrer-Liste des Maps-Keys stehen – sonst lädt die Karte nicht.
reCAPTCHA-Freigabe (nur bei Nutzung der Melde-Buttons): die Domain muss beim reCAPTCHA-Key eingetragen sein – oder für reine Suche show_actions=0 setzen, dann ist kein reCAPTCHA nötig.
Cookie-/Consent-Integration: window.locationsMapConsent = true oder der PHP-Filter locations_map_has_consent.