DOCS

Erweiterte Nutzung

Erweiterte Einbettungstechniken, Performance-Tipps und Integrationsmuster.

Widget-Attribute

Die <tickadoo-map> Web-Komponente akzeptiert folgende Attribute:

Attribut Typ Standard Beschreibung
map-id string — Ihre Map-ID (erforderlich)
locale string "en" UI-Sprache (en, de, es, fr, it, pt, ja, zh, cs)
theme string "system" Farbthema: light, dark oder system
mobile-list-variant string "carousel" Mobile Erlebnisliste: carousel oder drawer
enable-routing boolean false Wegbeschreibung mit Gehen/Radfahren/Autofahren anzeigen
center string — Kartenmittelpunkt als "lng,lat" (z.B. "14.42,50.08")
zoom number 10 Anfängliche Zoomstufe (1–20)
booking-mode string "calendar" Buchungsablauf
use-category-colors boolean false Kategoriespezifische Markerfarben verwenden

Lazy Loading

Wenn die Karte nicht sofort sichtbar ist (z. B. unterhalb des sichtbaren Bereichs oder in einem Tab), verzögern Sie das Laden, um die Seitenleistung zu verbessern:

Lazy Loading
<tickadoo-map map-id="YOUR_MAP_ID" style="height: 500px" loading="lazy">
</tickadoo-map>

Mit loading="lazy" wird die Karte erst initialisiert, wenn das Element in den sichtbaren Bereich scrollt.

Responsives Design

Das Widget ist standardmäßig responsiv, aber hier sind Muster für gängige Layouts:

Volle Breite

Abschnitt mit voller Breite
<section style="width: 100%; height: 70vh; min-height: 400px">
  <tickadoo-map map-id="YOUR_MAP_ID" style="width: 100%; height: 100%">
  </tickadoo-map>
</section>

Seitenleisten-Layout

Seitenleisten-Layout
<div style="display: flex; gap: 1rem; height: 600px">
  <div style="flex: 1">
    <!-- Ihr Inhalt -->
  </div>
  <tickadoo-map map-id="YOUR_MAP_ID" style="flex: 1">
  </tickadoo-map>
</div>

Content Security Policy (CSP)

Wenn Ihre Website eine Content Security Policy verwendet, müssen Sie diese Domains erlauben:

Direktive Domain Zweck
script-src b2b.tickadoo.com Widget-Script
script-src calendar-js.tickadoo.com Buchungskalender-Script
connect-src concierge.tickadoo.com API-Anfragen
connect-src calendar-js.tickadoo.com Übersetzungen des Buchungskalenders
connect-src pmtiles.tickadoo.com Kartenkachel-Daten
connect-src mapbox.tickadoo.com Routing-Dienste
img-src *.tickadoo.com Bilder und Icons
style-src 'unsafe-inline' Widget-Styles
CSP-Header-Beispiel
Content-Security-Policy:
  script-src 'self' b2b.tickadoo.com calendar-js.tickadoo.com;
  connect-src 'self' concierge.tickadoo.com calendar-js.tickadoo.com pmtiles.tickadoo.com mapbox.tickadoo.com;
  img-src 'self' *.tickadoo.com;
  style-src 'self' 'unsafe-inline';
Hinweise zur Performance

Das Widget-Script ist ungefähr 315 KB gzipped (einschließlich des Karten-Renderers). Kartenkacheln werden bei Bedarf geladen, wenn der Nutzer die Karte verschiebt und zoomt. Für die beste Performance:

  • Verwenden Sie defer beim Script-Tag, um das Rendern der Seite nicht zu blockieren
  • Verwenden Sie loading="lazy" beim Web Component, wenn es unterhalb des sichtbaren Bereichs liegt
  • Das Widget verwaltet automatisch das Kachel-Caching im Browser
Single Page Applications (SPAs)

Wenn Ihre Website eine SPA ist (React, Vue, Angular usw.), verwenden Sie den Web-Component-Ansatz. Das <tickadoo-map>-Element funktioniert mit dem DOM-Rendering jedes Frameworks.

Speziell für React:

React-Verwendung
function MapSection({ mapId }: { mapId: string }) {
  return (
    <div style={{ height: "500px" }}>
      <tickadoo-map map-id={mapId} />
    </div>
  );
}

Stellen Sie sicher, dass das Script einmal geladen wird, z. B. in Ihrer index.html oder über einen useEffect in einer übergeordneten Komponente.

Tip

Ein offizielles React-Paket (@tickadoo/map-react) ist für erstklassige Integration verfügbar. Kontaktieren Sie uns unter support@tickadoo.com für Zugang. Das Web Component funktioniert auch als ESM-Modul für andere Frameworks.