MapEmbed
Recht & DSGVOUniverselle Karten-Einbettung für Google Maps und OpenStreetMap — koordinatenbasiert (lat/lng/zoom) oder über fertige Embed-URL. Google ohne API-Key. DSGVO: Google mit Zwei-Klick-Consent, OpenStreetMap (EU-Server) lädt standardmäßig direkt.
Live Demo
OpenStreetMap (koordinatenbasiert, lädt direkt – DSGVO-freundlich, EU-Server)
Google Maps (koordinatenbasiert, kein API-Key – Zwei-Klick-Consent)
Google Maps
Beim Laden der Karte werden Daten an Google LLC (USA) übertragen. Weitere Informationen in unserer Datenschutzerklärung.
Props / API
| Prop | Typ | Pflicht | Default | Beschreibung |
|---|---|---|---|---|
provider | 'google' | 'osm' | Nein | 'osm' | Kartenanbieter |
lat | number | Nein | — | Breitengrad (Koordinaten-Modus) |
lng | number | Nein | — | Längengrad (Koordinaten-Modus) |
zoom | number | Nein | 15 | Zoomstufe 1–20 (Koordinaten-Modus) |
src | string | Nein | — | Fertige Embed-URL (überschreibt Koordinaten-Modus) |
title | string | Ja | — | Titel / Beschreibung (Barrierefreiheit) |
marker | boolean | Nein | true | Marker auf der Position anzeigen |
height | number | Nein | 400 | Höhe in Pixeln |
consent | boolean | Nein | — | Zwei-Klick-Consent erzwingen (Default: true für Google, false für OSM) |
privacyUrl | string | Nein | '/datenschutz/' | Link im Consent-Overlay |
borderRadius | number | Nein | 12 | Eckenradius in Pixeln |
className | string | Nein | — | Zusätzliche CSS-Klasse |
Code-Beispiel
// OpenStreetMap, koordinatenbasiert (lädt direkt, DSGVO-freundlich)
<MapEmbed provider="osm" lat={49.1533} lng={7.7742} zoom={15} title="Standort Dahn" />
// Google Maps koordinatenbasiert (Zwei-Klick-Consent, kein API-Key nötig)
<MapEmbed provider="google" lat={49.1533} lng={7.7742} zoom={16} title="Standort" />
// Fertige Google-Embed-URL (aus "Karte teilen → Karte einbetten")
<MapEmbed provider="google" src="https://www.google.com/maps/embed?pb=!1m18..." title="Standort" />