Einbettung interaktiver Karten

Beta Funktion

Interaktive Karten sind noch in Entwicklung. Für Kunden mit einem Paket S (oder höher) ist diese Funktion bis Ende Juli 2025 kostenfrei nutzbar, danach wird auf Basis der Nutzung abgerechnet. Momentan ist die Verfügbarkeit eingeschränkt und es kann zu Fehlern kommen. Feedback geben

Lernen Sie, wie Sie interaktive Karten in Ihre Website oder Anwendung einbetten. mapstudio.ai bietet flexible Einbettungsoptionen, die mit jeder Website oder jedem CMS funktionieren.

Schnelle Einbettung (Empfohlen)

Der einfachste Weg, eine interaktive Karte einzubetten:

html

<head>
  <!-- Script & CSS (für Kartendarstellung) zum Head hinzufügen -->
  <link rel="preload" href="https://share.mapstudio.ai/embed.js" as="script" />
  <link rel="stylesheet" href="https://share.mapstudio.ai/embed.css">
</head>

<body>
  <!-- Karten-Container -->
  <div id="meine-karte" style="width: 100%; height: 400px;"></div>


  <!-- JavaScript-Code für die Initialisierung der Karte (am Ende des Body) -->
  <script>
  mapstudio.createMap({
    containerId: "meine-karte", // Erforderlich: HTML-Element-ID
    exportId: "ihre-export-id-hier", // Erforderlich: Ihre Karten-Export-ID aus dem mapstudio.ai-Export-Dialog
  });
  </script>
</body>

Ersetzen Sie ihre-export-id-hier durch Ihre tatsächliche Export-ID aus dem mapstudio.ai Editor (Export-Dialog).

⚠️ Wichtig: Erlaubte Domains

Karten laden nur auf Domains, die Sie explizit in Ihren Arbeitsbereich-Einstellungen erlaubt haben. Konfigurieren Sie erlaubte Domains in Ihrem mapstudio.ai-Dashboard unter Interaktive Karten → Erlaubte Domains.

Weitere Einbettungsoptionen

Die Funktion mapstudio.createMap() akzeptiert diese weiteren Optionen:

javascript

mapstudio.createMap({
  containerId: "karten-container",    // Erforderlich: HTML-Element-ID
  exportId: "abc123",                // Erforderlich: Ihre Karten-Export-ID
  display: {
    // Position der Navigationssteuerung - Standard: "top-right" - Optionen: false, "top-left", "top-right", "bottom-left", "bottom-right"
    showNavigationControl: "top-right",
    // Lade-Status-Overlay deaktivieren - Standard: false - Optionen: true, false
    disableLoadingOverlay: false,
  }
});

(Optional) Fallback für deaktiviertes JavaScript

Fügen Sie immer ein Fallback-Bild für Benutzer ohne JavaScript hinzu:

html

<div id="karten-container">
  <noscript>
    <img 
      src="https://share.mapstudio.ai/embed/<ihre-export-id-hier>/fallback.webp" 
      alt="Interaktive Karte"
      style="width: 100%; height: 100%; object-fit: cover;"
    />
  </noscript>
</div>

Bitte ersetzen Sie <ihre-export-id-hier> durch Ihre tatsächliche Export-ID aus dem mapstudio.ai Editor (Export-Dialog). Für den Fall, dass die Karte nicht geladen werden kann, wird der festgelegte Kartenausschnitt (im Export festgelegt) als statisches Bild angezeigt.

(Optional) Content Security Policy (CSP)

Für Websites mit Content Security Policy (CSP) fügen Sie diese Direktive zu Ihrer CSP-Konfiguration hinzu:

text

script-src 'self' 'unsafe-inline' https://share.mapstudio.ai;
style-src 'self' 'unsafe-inline' https://share.mapstudio.ai;
img-src 'self' data: blob: https://map.cdn.mapstudio.ai https://share.mapstudio.ai;
connect-src 'self' https://map.cdn.mapstudio.ai https://fonts.mapstudio.ai https://share.mapstudio.ai;
worker-src 'self' data: blob:;
font-src 'self';

Responsives Design

Karten passen sich automatisch an die Containergröße an. Es ist zwingend notwendig eine Containergröße zu setzen. Beispiel für ein responsives Design:

css

.karten-container {
  width: 100%;
  height: 60vh;
  min-height: 300px;
  max-height: 600px;
}

@media (max-width: 768px) {
  .karten-container {
    height: 40vh;
    min-height: 250px;
  }
}

Häufige Integrationsprobleme

Karte lädt nicht

Erlaubte Domains prüfen in Workspace-Einstellungen
Export-ID verifizieren ist korrekt und Karte existiert
Browser-Konsole prüfen für Fehlermeldungen (Wird Javascript geladen?)

CSP blockiert Ressourcen

mapstudio.ai-Domains hinzufügen zu CSP-Direktiven
Browser-Konsole prüfen für CSP-Verletzungsmeldungen
Mit deaktivierter CSP oder CSP-Report-Only testen um das Problem zu bestätigen

Performance-Probleme

Angemessene Containergröße setzen (sehr große Karten vermeiden)
CSS verwenden um Layout zu optimieren bevor Karte lädt
Lazy Loading erwägen für Karten unterhalb der Sichtlinie

Erweiterte Integration

Lazy Loading

Karten nur laden, wenn sie sichtbar werden:

javascript

// Intersection Observer für Lazy Loading
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      mapstudio.createMap({
        containerId: entry.target.id,
        exportId: "ihre-export-id"
      });
      observer.unobserve(entry.target);
    }
  });
});

observer.observe(document.getElementById("karten-container"));

Mehrere Karten

Mehrere Karten auf derselben Seite einbetten:

html

<div id="karte-1" style="width: 100%; height: 400px; margin-bottom: 20px;"></div>
<div id="karte-2" style="width: 100%; height: 400px;"></div>

<script>
mapstudio.createMap({
  containerId: "karte-1",
  exportId: "erste-export-id"
});

mapstudio.createMap({
  containerId: "karte-2", 
  exportId: "zweite-export-id"
});
</script>

Weiter: Erfahren Sie mehr über Implementierungsbeispiele für verschiedene Plattformen.