Karten einrichten

Das Karten-Modul ermöglicht die Darstellung interaktiver Karten in deiner App mit DSGVO-konformer Einwilligungsverwaltung. Du kannst zwischen mehreren Kartenanbietern wählen.

Übersicht

Das Karten-Modul bietet folgende Funktionen:

OpenStreetMap

Kostenlose Karten ohne API-Key.

Google Maps

Hochwertige Karten mit Street View.

MapTiler

Moderne Kartenstile, EU-Server.

Marker-Clustering

Intelligentes Gruppieren von Markern.

DSGVO-konform

Einwilligungsverwaltung integriert.

Orte hinzufügen

Standorte mit Details verwalten.

---

Voraussetzungen

Das Karten-Modul benötigt:

Voraussetzung	Status	Beschreibung
Firebase-Projekt	Erforderlich	Für Cloud Functions
Service Account	Empfohlen	Für automatisches Setup
API-Keys	Je nach Anbieter	Google Maps und MapTiler benötigen Keys

Firebase erforderlich

Für die sichere Speicherung der API-Keys werden Firebase Cloud Functions benötigt. Richte zuerst das Firebase-Modul ein.

OpenStreetMap kostenlos

OpenStreetMap benötigt keinen API-Key und ist komplett kostenlos. Ideal für den Start.

---

Setup starten

1. Öffne den Edit Mode in deiner App
2. Gehe zu Module & Features
3. Tippe auf Karten und dann auf Einrichten
4. Der Setup-Assistent öffnet sich

---

Die Setup-Schritte im Überblick

Das Karten-Setup besteht aus fünf Schritten:

Schritt 1: Einführung

Eine Übersicht über das Karten-Modul und seine Funktionen.

Was du siehst:

• Titel: „Karten-Modul”
• Beschreibung: „Interaktive Karten mit mehreren Anbietern und DSGVO-Compliance.”

Enthaltene Features:

Feature	Beschreibung
OpenStreetMap (kostenlos)	Kostenlose Karten ohne API-Key
Google Maps Integration	Hochwertige Karten mit Street View
MapTiler Karten	Moderne Kartenstile, EU-Server
Marker-Clustering	Intelligentes Gruppieren vieler Marker
DSGVO-konforme Einwilligung	Consent-Dialog vor Kartenanzeige

Info-Schritt

Dieser Schritt zeigt nur Informationen an. Tippe auf „Weiter”, um fortzufahren.

---

Schritt 2: Kartenanbieter wählen

Wähle die Kartenanbieter, die du in deiner App nutzen möchtest.

Verfügbare Anbieter:

OpenStreetMap

Empfohlen

OpenStreetMap (OSM)

Eigenschaft	Wert
Kosten	Kostenlos
API-Key	Nicht erforderlich
Vorteile	Open Source, weltweit verfügbar

• Ideal für den Start ohne Kosten
• Keine Registrierung nötig
• Community-gepflegte Daten

Empfehlung

Starte mit OpenStreetMap. Du kannst später jederzeit weitere Anbieter hinzufügen.

Google Maps

Google Maps

Eigenschaft	Wert
Kosten	Kostenpflichtig (Free Tier verfügbar)
API-Key	Erforderlich
Vorteile	Hochwertige Karten, Street View

• Beste Kartenqualität
• Street View Integration möglich
• Erfordert Google Cloud Account
• Free Tier: ca. 28.000 Kartenaufrufe/Monat kostenlos

API-Key erforderlich

Google Maps benötigt einen API-Key aus der Google Cloud Console.

MapTiler

MapTiler

Eigenschaft	Wert
Kosten	Kostenpflichtig (Free Tier verfügbar)
API-Key	Erforderlich
Vorteile	Stilvolle Designs, EU-Server

• Moderne Kartenstile
• Server in der EU (DSGVO-freundlich)
• Erfordert MapTiler Account
• Free Tier: ca. 100.000 Aufrufe/Monat kostenlos

API-Key erforderlich

MapTiler benötigt einen API-Key von maptiler.com.

Mehrere Anbieter möglich:

Du kannst einen oder mehrere Anbieter aktivieren. Der Standard-Anbieter wird automatisch basierend auf deiner Auswahl gesetzt:

1. Wenn nur OSM aktiviert → OSM ist Standard
2. Wenn Google aktiviert → Google wird Standard
3. Wenn nur MapTiler → MapTiler wird Standard

👉 Mehr zu Kartenanbietern

---

Schritt 3: API-Konfiguration

Richte die API-Keys für Google Maps und/oder MapTiler ein.

Nur bei Bedarf

Dieser Schritt erscheint nur, wenn du Google Maps oder MapTiler aktiviert hast. Bei reinem OpenStreetMap wird dieser Schritt übersprungen.

Was konfiguriert wird:

Funktion	Beschreibung
Cloud Functions	Sichere Key-Verwaltung in Firebase
API-Key Speicherung	Keys werden verschlüsselt gespeichert
Zugriffsbeschränkungen	Nur Admin-Rolle kann Keys verwalten
Key-Validierung	Prüfung der eingegebenen Keys

Optionen:

Option	Beschreibung
„Wizard starten”	Geführtes Setup mit Key-Eingabe
„Überspringen (nur OpenStreetMap)“	Später API-Keys hinzufügen

👉 Mehr zur API-Konfiguration

---

Schritt 4: Datenschutz

Überprüfe die DSGVO-konformen Datenschutz-Funktionen.

Integrierte Datenschutz-Features:

Feature	Status	Beschreibung
Consent-Dialog	Aktiviert	Dialog vor Kartenanzeige
Einwilligung speicherbar	Aktiviert	Nutzer muss nicht jedes Mal zustimmen
Link zur Datenschutzerklärung	Aktiviert	Automatisch verknüpft
Automatischer Datenschutztext	Aktiviert	Vorgefertigter Text

DSGVO-konform

Das Karten-Modul enthält alle notwendigen Datenschutz-Funktionen für DSGVO-Compliance. Du musst nichts zusätzlich einrichten.

---

Schritt 5: Fertig!

Dein Karten-Modul ist bereit zur Nutzung!

Was du siehst:

• Erfolgsbestätigung: „Karten-Modul eingerichtet!”
• Beschreibung: „Sie können das Modul jetzt als eigenständige Seite nutzen oder in andere Module integrieren.”

Nächste Schritte nach dem Setup:

Schritt	Beschreibung
Karteneinstellungen anpassen	Zoom, Stil, Startposition
In andere Module integrieren	Karten in Profilen, Shops, etc.
Orte hinzufügen	Standorte mit Markern anlegen

---

Der API-Konfiguration Wizard

Wenn du Google Maps oder MapTiler aktivierst, führt dich der Wizard durch die Konfiguration:

Wizard-Flow

Deployment → Intro → Provider → Keys → Abschluss

Phase 1: Cloud Functions Deployment

1. Automatisches Setup starten

   Der Wizard prüft den Service Account und deployed die Cloud Functions.

2. Status prüfen

   Ergebnis	Meldung
   ✅ Erfolgreich	„Einrichtung erfolgreich!”
   ✅ Demo-Modus	„Einrichtung erfolgreich (Demo-Modus)”
   ❌ Fehler	„Einrichtung fehlgeschlagen”

3. Weiter zum Intro

   Bei Erfolg geht es zur Anbieter-Auswahl.

Phase 2: Anbieter auswählen

Aktiviere die gewünschten Kartenanbieter durch Antippen:

• OpenStreetMap - Immer verfügbar, kein Key nötig
• Google Maps - Checkbox zum Aktivieren
• MapTiler - Checkbox zum Aktivieren

Phase 3: API-Keys eingeben

Für aktivierte Anbieter (außer OSM) gibst du die API-Keys ein:

Google Maps API-Key:

Eigenschaft	Wert
Format	Beginnt mit AIza...
Wo erstellen	Google Cloud Console
Validierung	Automatisch geprüft

MapTiler API-Key:

Eigenschaft	Wert
Format	Alphanumerischer String
Wo erstellen	maptiler.com
Validierung	Automatisch geprüft

Keys sicher gespeichert

Die Keys werden sicher in Cloud Functions gespeichert und sind nicht im App-Code sichtbar.

Phase 4: Abschluss

Eine Zusammenfassung zeigt:

• Standard-Anbieter - Der primär verwendete Anbieter
• Aktivierte Anbieter - Alle verfügbaren Anbieter
• Datenschutz - DSGVO-konform

---

Tipps

Mit OSM starten

Starte mit OpenStreetMap. Es ist kostenlos und benötigt keine Registrierung. Du kannst später jederzeit Google Maps oder MapTiler hinzufügen.

API-Keys schützen

Die API-Keys werden automatisch in Cloud Functions gespeichert und sind dadurch vor Missbrauch geschützt.

DSGVO beachten

Der integrierte Consent-Dialog erfüllt die DSGVO-Anforderungen. Verknüpfe ihn mit deiner Datenschutzerklärung.

Später erweitern

Du kannst die Anbieter-Einstellungen jederzeit im Karten-Editor ändern.

---

Abhängigkeiten

Modul	Status
Firebase	Erforderlich (für Cloud Functions)
Service Account	Empfohlen (für automatisches Setup)
Google Cloud Account	Optional (nur für Google Maps)
MapTiler Account	Optional (nur für MapTiler)

---

Nach der Einrichtung

Nach erfolgreichem Setup:

• Cloud Functions für Key-Verwaltung sind deployed
• Ausgewählte Anbieter sind konfiguriert
• DSGVO-konforme Einwilligungsverwaltung ist aktiv
• Karten-Modul ist einsatzbereit

---

Weiterführende Themen

Kartenanbieter Details zu OSM, Google Maps und MapTiler

API-Konfiguration API-Keys einrichten und validieren

Karten-Editor Karteneinstellungen anpassen

Service Account Für automatisches Setup