DOCS

Erweiterte Nutzung

Erweiterte Einbettungstechniken, Performance-Tipps und Integrationsmuster.

Widget-Attribute

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

AttributTypStandardBeschreibung
map-idstring—Ihre Map-ID (erforderlich)
localestring"en"UI-Sprache (en, de, es, fr, it, pt, ja, zh, cs)
themestring"system"Farbthema: light, dark oder system
mobile-list-variantstring"carousel"Mobile Erlebnisliste: carousel oder drawer
enable-routingbooleanfalseWegbeschreibung mit Gehen/Radfahren/Autofahren anzeigen
centerstring—Kartenmittelpunkt als "lng,lat" (z.B. "14.42,50.08")
zoomnumber10Anfängliche Zoomstufe (1–20)
booking-modestring"calendar"Buchungsablauf
use-category-colorsbooleanfalseKategoriespezifische 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:

DirektiveDomainZweck
script-srcb2b.tickadoo.comWidget-Script
connect-srcapi.tickadoo.comAPI-Anfragen
connect-srcpmtiles.tickadoo.comKartenkachel-Daten
img-src*.tickadoo.comBilder und Icons
style-src'unsafe-inline'Widget-Styles
CSP-Header-Beispiel 
Content-Security-Policy:
  script-src 'self' b2b.tickadoo.com;
  connect-src 'self' api.tickadoo.com pmtiles.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.