Logo of mapstudio.ai

Dokumentation

Erste Schritte
Style Editor
Interaktive Karten
Übersicht
Einbettung
Beispiele
Abrechnung
Datenschutz
Logo of mapstudio.ai

Integrationsbeispiele

Gebrauchsfertige Codebeispiele für die Einbettung interaktiver Karten in verschiedenen Plattformen.

HTML-Beispiel

Grundlegende HTML-Integration, die auf jeder Website funktioniert:

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine interaktive Karte</title>
    
    <!-- Preload und CSS für optimale Performance -->
    <link rel="preload" href="https://share.mapstudio.ai/embed.js" as="script" />
    <link rel="stylesheet" href="https://share.mapstudio.ai/embed.css">
</head>
<body>
    <h1>Willkommen zu unseren Filialstandorten</h1>
    
    <!-- Karten-Container mit Fallback -->
    <div id="filialen-karte" style="width: 100%; height: 500px; border: 1px solid #ddd; border-radius: 8px;">
        <noscript>
            <img 
                src="https://share.mapstudio.ai/embed/ihre-export-id/fallback.webp" 
                alt="Filialstandorte Karte"
                style="width: 100%; height: 100%; object-fit: cover;"
            />
        </noscript>
    </div>
    
    <!-- Karte initialisieren (Skript wird automatisch geladen durch preload) -->
    <script>
       mapstudio.createMap({
         containerId: "filialen-karte",
         exportId: "ihre-export-id-hier", // Ersetzen Sie mit Ihrer tatsächlichen Export-ID
         display: {
             showNavigationControl: "top-left"
         }
       });
    </script>
</body>
</html>

WordPress-Beispiel

Methode 1: Benutzerdefinierter HTML-Block

Fügen Sie dies zu einem benutzerdefinierten HTML-Block in WordPress hinzu:

html
<!-- Karten-Container -->
<div id="wp-karte" style="width: 100%; height: 400px; margin: 20px 0;">
    <noscript>
        <img src="https://share.mapstudio.ai/embed/ihre-export-id/fallback.webp" 
             alt="Interaktive Karte" style="width: 100%; height: 100%; object-fit: cover;" />
    </noscript>
</div>

<!-- CSS für mapstudio.ai -->
<link rel="stylesheet" href="https://share.mapstudio.ai/embed.css">

<!-- Karte laden und initialisieren -->
<script src="https://share.mapstudio.ai/embed.js"></script>
<script>
mapstudio.createMap({
    containerId: "wp-karte",
    exportId: "ihre-export-id-hier",
    display: {
        showNavigationControl: "top-right"
    }
});
</script>

Methode 2: Functions.php-Integration

Fügen Sie zu der functions.php Ihres Themes hinzu:

php
<?php
// mapstudio.ai-Ressourcen zu WordPress hinzufügen
function add_mapstudio_assets() {
    wp_enqueue_style('mapstudio-embed', 'https://share.mapstudio.ai/embed.css', array(), null);
    wp_enqueue_script('mapstudio-embed', 'https://share.mapstudio.ai/embed.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'add_mapstudio_assets');

// Shortcode für einfache Karteneinbettung
function mapstudio_map_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => '',
        'height' => '400px',
        'controls' => 'top-right'
    ), $atts);
    
    if (empty($atts['id'])) {
        return '<p style="color: #d32f2f;">Fehler: Karten-ID erforderlich. Verwendung: [mapstudio id="ihre-export-id"]</p>';
    }
    
    $container_id = 'mapstudio-' . uniqid();
    $export_id = esc_attr($atts['id']);
    $height = esc_attr($atts['height']);
    $controls = esc_attr($atts['controls']);
    
    ob_start();
    ?>
    <div id="<?php echo $container_id; ?>" style="width: 100%; height: <?php echo $height; ?>;">
        <noscript>
            <img src="https://share.mapstudio.ai/embed/<?php echo $export_id; ?>/fallback.webp" 
                 alt="Interaktive Karte" 
                 style="width: 100%; height: 100%; object-fit: cover;" />
        </noscript>
    </div>
    <script>
    mapstudio.createMap({
        containerId: "<?php echo $container_id; ?>",
        exportId: "<?php echo $export_id; ?>",
        display: {
            showNavigationControl: "<?php echo $controls; ?>"
        }
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('mapstudio', 'mapstudio_map_shortcode');
?>

Verwendung in Beiträgen:

[mapstudio id="ihre-export-id" height="500px" controls="top-left"]

Next.js-Beispiel

App Router Implementierung mit Script-Komponente

Erstellen Sie eine wiederverwendbare Komponente:

typescript
// components/MapstudioMap.tsx
'use client';

import { useEffect, useRef } from 'react';

interface MapstudioMapProps {
  exportId: string;
  height?: string;
  showControls?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | false;
  className?: string;
}

declare global {
  interface Window {
    mapstudio?: {
      createMap: (config: any) => void;
    };
  }
}

export default function MapstudioMap({ 
  exportId, 
  height = '400px',
  showControls = 'top-right',
  className = ''
}: MapstudioMapProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (window.mapstudio && containerRef.current) {
      window.mapstudio.createMap({
        containerId: containerRef.current.id,
        exportId,
        display: {
          showNavigationControl: showControls
        }
      });
    }
  }, [exportId, showControls]);

  const containerId = `mapstudio-${exportId}-${Math.random().toString(36).substr(2, 9)}`;

  return (
    <div 
      ref={containerRef}
      id={containerId}
      style={{ height, width: '100%' }}
      className={`rounded-lg overflow-hidden ${className}`}
    >
      <noscript>
        <img 
          src={`https://share.mapstudio.ai/embed/${exportId}/fallback.webp`}
          alt="Interaktive Karte"
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
      </noscript>
    </div>
  );
}

Layout-Integration mit Script-Komponente

typescript
// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <head>
        {/* CSS für mapstudio.ai */}
        <link rel="stylesheet" href="https://share.mapstudio.ai/embed.css" />

        {/* mapstudio.ai-Skript global laden */}
        <Script
          src="https://share.mapstudio.ai/embed.js"
          strategy="beforeInteractive"
        />
      </head>
      <body>
        {children}
      </body>
    </html>
  )
}

Ggf. sollten Sie seperates Layout Handling nutzen, um nicht für alle Seiten das Skript unnötig laden zu müssen.

Verwendung in Next.js-Seiten

typescript
// app/page.tsx
import MapstudioMap from '@/components/MapstudioMap';

export default function HomePage() {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6">Unsere Standorte</h1>
      
      <MapstudioMap 
        exportId="ihre-export-id-hier"
        height="500px"
        showControls="top-right"
        className="mb-6"
      />
      
      <p className="mt-4 text-gray-600">
        Finden Sie uns an einem dieser bequemen Standorte.
      </p>
    </div>
  );
}

Performance-Optimierung

Lazy Loading-Beispiel

Karten nur laden, wenn sie sichtbar werden:

javascript
// Intersection Observer für Lazy Loading
const mapObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && window.mapstudio) {
      const containerId = entry.target.id;
      const exportId = entry.target.dataset.exportId;
      
      mapstudio.createMap({
        containerId,
        exportId,
        display: {
          showNavigationControl: "top-right"
        }
      });
      
      mapObserver.unobserve(entry.target);
    }
  });
});

// HTML
<div 
  id="lazy-karte" 
  data-export-id="ihre-export-id"
  style="width: 100%; height: 400px;">
  <noscript>
    <img src="https://share.mapstudio.ai/embed/ihre-export-id/fallback.webp" 
         alt="Interaktive Karte" style="width: 100%; height: 100%; object-fit: cover;" />
  </noscript>
</div>

// Observer initialisieren
document.addEventListener('DOMContentLoaded', function() {
  const lazyMap = document.getElementById('lazy-karte');
  if (lazyMap) {
    mapObserver.observe(lazyMap);
  }
});

Erweiterte Konfiguration

Content Security Policy (CSP)

Für Websites mit Content Security Policy fügen Sie diese Direktiven hinzu:

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

CSP-Header in Next.js hinzufügen

In next.config.js hinzufügen:

javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: [
              "default-src 'self'",
              "script-src 'self' 'unsafe-inline' https://share.mapstudio.ai",
              "style-src 'self' https://share.mapstudio.ai",
              "img-src 'self' data: blob: https://map.cdn.mapstudio.ai",
              "connect-src 'self' https://map.cdn.mapstudio.ai https://fonts.mapstudio.ai",
              "worker-src 'self' data: blob:",
              "font-src 'self'"
            ].join('; ')
          }
        ]
      }
    ];
  }
};

module.exports = nextConfig;

Testen Ihrer Integration

  1. Erlaubte Domains prüfen in mapstudio.ai Workspace-Einstellungen
  2. Auf verschiedenen Geräten testen und Bildschirmgrößen
  3. Fallback-Bild verifizieren wird ohne JavaScript angezeigt
  4. Browser-Konsole überwachen für Fehler
  5. Ladeleistung testen mit Netzwerk-Drosselung

Weiter: Erfahren Sie mehr über Abrechnung und Preise für interaktive Karten.

ImpressumDatenschutzGeschäftsbedingungenLizenzbedingungen

© 2025 mapstudio. Alle Rechte vorbehalten.