Eine interaktive Event-Karte auf jede Website bringen

Eine einbettbare, interaktive Karte zur Entdeckung von Veranstaltungen — mit kuratierten Daten aus hunderten Quellen. Ein HTML-Tag, kein Build-Schritt, kein Framework. Fügen Sie <balloon-events-map> in eine beliebige Seite ein.

Schnellstart

<link rel="stylesheet" href="https://res.balloon-events.com/embed/latest/map.css">

<div style="width: 100%; height: 500px;">
  <balloon-events-map
    api-key="your-partner-key"
    language="de"
    initial-lat="48.2082"
    initial-lng="16.3738"
    initial-zoom="12"
    map-scrollable
    show-zeppelins>
  </balloon-events-map>
</div>

<script type="module" src="https://res.balloon-events.com/embed/latest/map.webcomponent.js"></script>

Das war's — Snippets in eine beliebige HTML-Seite einfügen und eine interaktive Event-Karte erscheint.

Das Element hat keine implizite Größe. Geben Sie ihm (oder dem umgebenden Container) eine explizite Breite und Höhe, sonst kollabiert es auf null.

Konfiguration

Alle Optionen sind HTML-Attribute am <balloon-events-map>-Tag.

Am häufigsten verwendet:

  • api-key — Ihr Partner-Schlüssel (erforderlich)
  • language — de, en, …
  • initial-lat / initial-lng / initial-zoom — Startansicht
  • routing-type — hash oder browser; synchronisiert den Kartenzustand mit der URL
  • map-scrollable — Scroll-Zoom aktivieren
  • show-bookmark-button, show-bottom-cards, preview-cards, show-zeppelins, show-creator-link, cooperative-gestures — UI-Schalter

Datensatz mit root-query einschränken:

<balloon-events-map
  api-key="your-partner-key"
  root-query='{"tags":["food-festival"]}'
  initial-lat="48.2082" initial-lng="16.3738" initial-zoom="12">
</balloon-events-map>

root-query akzeptiert ein JSON-Objekt, das jede Suche nach tags, categories, region, sources oder text einschränkt. Verwenden Sie einfache Anführungszeichen um das Attribut, damit die doppelten Anführungszeichen im JSON unverändert funktionieren.

Vollständige Attribut-Referenz, Query-Schema und Lifecycle-Hinweise finden Sie in der Web Component Entwickler-Doku.

Events

Das Element sendet aufsteigende CustomEvents. Lauschen Sie wie auf jedes andere DOM-Event:

const map = document.querySelector('balloon-events-map');

map.addEventListener('ready', (e) => console.log('ready', e.detail));
map.addEventListener('eventClick', (e) => console.log('clicked', e.detail));
map.addEventListener('error', (e) => console.error(e.detail.error));

Verfügbare Events: ready, eventClick, eventHover, locationChange, zoomChange, error, destroyed.

Warum unsere Embeds beliebt sind

  • Einrichten und vergessen — Event-Daten aktualisieren sich automatisch aus hunderten Quellen
  • Ein Tag, jeder Stack — Reines HTML, React, Vue, WordPress, Shopify — überall derselbe einzelne Tag
  • Sieht überall gut aus — Responsiv auf allen Bildschirmgrößen
  • Mehrere Instanzen — Unabhängige Karten auf derselben Seite, jede mit eigenem Filter
  • In sich geschlossen — Das Bundle enthält alles; keine separate Worker-Datei, keine zusätzlichen Abhängigkeiten
  • Auto-Caching — Metadaten im localStorage für schnelle Ladezeiten

Was im Hintergrund passiert

  1. Ihre Seite lädt map.webcomponent.js und map.css von unserem CDN
  2. Das Custom Element registriert sich automatisch und rendert ein Mapbox-Canvas
  3. Es ruft kuratierte Events ab, gefiltert nach Ihrem api-key und optionalem root-query
  4. Events erscheinen als Ballon-Marker; Besucher zoomen, navigieren und klicken zur Entdeckung
  5. Daten bleiben aktuell — aus unserer Kuratierungspipeline

Wer nutzt es?

  • Stadtwebsites — Interaktive Event-Karten, die Einwohner tatsächlich nutzen
  • Tourismusportale — „Was ist los"-Entdeckung für Besucher
  • Nachrichtenportale — Event-Karten neben redaktionellen Inhalten
  • Community-Plattformen — Lokale Event-Entdeckung ohne Datenarbeit

Mehr Einsatzbeispiele für Website-Betreiber.

Jetzt starten

  1. Partner-Schlüssel holen
  2. Schnellstart-Snippet in eine Seite einfügen
  3. initial-lat, initial-lng und optional root-query auf Ihre Region oder Ihr Thema anpassen
  4. Events erscheinen

Weitere Ressourcen