Für Webseiten & Portale

Karte in die eigene Website einbinden

Kartenansicht erstellen, Code kopieren und direkt in Website, Intranet oder Portal einsetzen. Für die Einbindung wird der schlanke, iframe-fähige Kartenviewer verwendet.

Karte erstellen Code direkt kopieren

Schnellstart

In drei Schritten zur eingebetteten Karte

Für einen ersten Test reicht das Beispiel unten. Im Kartenstudio lassen sich anschließend eigene Orte, Routen und Inhalte erstellen.

  1. Karte erstellen

    Im Kartenstudio gewünschte Inhalte und Darstellung festlegen.

  2. Embed-Code kopieren

    Den erzeugten iFrame-Code oder den unten stehenden Startcode verwenden.

  3. In HTML einfügen

    Den Code an der gewünschten Stelle im eigenen CMS oder Template einsetzen.

Direkt einsetzbarer iFrame

Mit Beispielposition München; im Kartenstudio wird der Code passend zur eigenen Karte erzeugt.

HTML 
<iframe
  src="https://karte.bayern/embed/?center=48.137154,11.576124&zoom=13&title=München"
  width="100%"
  height="550"
  style="display:block;width:100%;border:0;border-radius:12px;"
  loading="lazy"
  allow="geolocation; fullscreen; clipboard-write"
  allowfullscreen
  referrerpolicy="no-referrer"
  sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
  title="Karte von München"></iframe>
Beispiel öffnen

Datenschutzfreundlich: Der Standortzugriff ist erst nach einer ausdrücklichen Browserfreigabe möglich. Mit referrerpolicy="no-referrer" wird die Adresse der einbettenden Seite nicht übertragen.

Für die eigene Karte anpassen

  1. Öffne das Kartenstudio und erstelle die Karte mit Markern, Routen oder anderen Inhalten.
  2. Kopiere im Studio den erzeugten Embed-Link oder den iFrame-Code.
  3. Füge den iFrame in die eigene Seite ein. Die Karte läuft dann direkt im eigenen Layout.

Der Editor unter /teilen/?edit erzeugt den passenden iFrame-Code automatisch. Für öffentliche Seiten sollte der reine Anzeige-Link genutzt werden, nicht der Editor-Link.

Vorlagen für verschiedene Einsatzzwecke

Der Generator passt Kategorien, Farben, Markersymbole, Linienarten, Grundkarte und Bedienelemente an den gewählten Einsatzzweck an. Alle Einstellungen bleiben anschließend individuell änderbar.

Feuerwehrkarten in dieser öffentlichen Embed-Funktion sind ausschließlich für vorbereitende, freigabefähige Informationen gedacht. Keine Live-Lage, Personendaten, Zugangscodes oder vertraulichen taktischen Angaben veröffentlichen.

Einfache Karte per URL konfigurieren

Für eine Karte ohne Editor reichen lesbare Parameter:

https://karte.bayern/embed/
  ?center=48.137154,11.576124
  &zoom=13
  &title=München
  &basemap=karte

Ein einzelner markierter Ort:

https://karte.bayern/embed/
  ?marker=48.137154,11.576124
  &marker_title=Marienplatz
  &zoom=15

Bedienelemente lassen sich mit header, layers, share, navigation, list, locate, zoom_controls, scale und scroll_zoom jeweils über 0 oder 1 steuern. Mit preset=standard|company|event|fire-preplan wird eine der Vorlagen aktiviert. Die Datenquellen-Attribution bleibt immer sichtbar.

Für einen Übergang aus einem Termin, QR-Code, Shop oder Dispositionssystem verwende keinen iFrame, sondern einen Link auf https://karte.bayern/nav/. Start, Ziel und Verkehrsprofil können damit direkt im Routenformular vorausgefüllt werden. 

https://karte.bayern/nav/?from=48.1450,11.5670
  &to=48.137154,11.576124
  &to_label=Marienplatz
  &profile=foot
  &route=1

Wiederhole via für Zwischenstopps. Zulässige Profile sind car, foot und bike; mit routing=fast|balanced|short wird die Routenpräferenz gewählt. route=1 berechnet eine Vorschau, startet aber nie selbständig eine Navigation oder Ortung.

Für eine Kartenansicht nutze ?center=48.137154,11.576124&zoom=15, für eine vorausgefüllte Suche ?q=Apotheke%20Marienplatz. Keine persönlichen Daten, Zugangscodes oder geheimen Tokens in URLs einfügen, da Links in Verläufen und Protokollen erscheinen können.

Eigene Marker und GeoJSON-Daten

Mehrere Marker und Routen lassen sich ohne Programmierung im Karteneditor anlegen. Für größere oder regelmäßig aktualisierte Daten kann die Einbettung eine GeoJSON-Datei laden: 

https://karte.bayern/embed/?overlay=https%3A%2F%2Fexample.org%2Fstandorte.geojson

Externe Dateien müssen über HTTPS erreichbar sein und den Browserzugriff per CORS erlauben. Unterstützt werden Punkte, Linien und Flächen. Titel, Beschreibung, Kategorie, Hex-Farbe, Link und optionale Sichtbarkeitszeiträume können als GeoJSON-Properties mitgegeben werden.

Datenschutz, Sicherheit und Barrierefreiheit

Kartentitel, Marker und GeoJSON-Inhalte einer öffentlichen Einbettung sind öffentlich abrufbar. Dort gehören keine Zugangsdaten oder vertraulichen Standortdaten hinein.

Praxisempfehlungen für Gemeinden und Kunden

Hinweis zur Verfügbarkeit

Die Einbindung ist aktuell frei möglich. Es kann sein, dass neue Einbindungen oder erweiterte Funktionen später eine Registrierung oder Freigabe erfordern. Wenn sich daran etwas ändert, wird das hier transparent dokumentiert.

Für Gemeinden, die mehrere Einbindungen, eigene Daten oder einen abgestimmten Rollout planen, empfehlen wir eine kurze Abstimmung vor dem Livegang.

Kurz gefragt

Kann ich die Karte ohne Login einbetten?
Ja, aktuell ist das möglich.
Woher bekomme ich den Code?
Im Editor unter /teilen/?edit wird der Code automatisch erzeugt.
Warum zeigt mein externes GeoJSON keine Daten?
Prüfe HTTPS, CORS, gültiges GeoJSON und die Browser-Konsole. Externe HTTP-Quellen werden abgelehnt.
Wie viele Daten kann ich direkt in den Link legen?
Die Embed-Query ist auf 96 KiB begrenzt. Für größere Karten sollte eine GeoJSON-URL verwendet werden.
Was ist, wenn ich mehrere Karten brauche?
Dann lohnt sich eine gemeinsame Abstimmung, damit Struktur, Höhe und Zielseiten sauber geplant werden.

Die vollständige technische Referenz mit Konfigurationsschema, GeoJSON-Properties, Grenzwerten und Testhinweisen liegt in docs/EMBEDDING.md.