Integrationsbeispiele
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 gebenGebrauchsfertige 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
- Erlaubte Domains prüfen in mapstudio.ai Workspace-Einstellungen
- Auf verschiedenen Geräten testen und Bildschirmgrößen
- Fallback-Bild verifizieren wird ohne JavaScript angezeigt
- Browser-Konsole überwachen für Fehler
- Ladeleistung testen mit Netzwerk-Drosselung
Weiter: Erfahren Sie mehr über Abrechnung und Preise für interaktive Karten.