Maps in Website einbinden: Anbieter und technische Möglichkeiten

Kommerzielle Plattformen

Der bekannteste kommerzielle Kartendienst ist wohl Google Maps, der auf Webseiten zum Einsatz kommt. Für Google Maps sprechen die aktuellen Kartendaten und Funktionen wie ein Routenplaner mit Verkehrsinformationen in Echtzeit. Gegen den amerikanischen Anbieter sprechen jedoch vor allem Datenschutzgründe. So verwendet der Dienst beispielsweise auch dann Standortdaten, wenn die Nutzer dem nicht ausdrücklich zugestimmt haben, und speichert Standortverläufe standardmäßig für 90 Tage. Zudem können bei der Verwendung von Google Maps Nutzerdaten an Rechenzentren in den USA fließen. Dadurch kann es zu Verstößen gegen die Datenschutzgrundverordnung (DSGVO) kommen.
Ähnlich verhält es sich mit anderen kommerziellen US-Kartendiensten wie Apple Maps oder Bing Maps.

Hybride Ansätze

Die Kombination von Basiskarten, wie sie zum Beispiel OSM bietet, mit proprietären Overlays, die beispielsweise Verkehrsdaten oder POIs enthalten, ermöglicht maßgeschneiderte Lösungen für verschiedene Kunden und Branchen wie etwa Standortkarten, Routenplaner, Geokodierung und Adressvervollständigung. SmartMaps, als ein führender Anbieter von Geoservices und Kartentechnologien, hat sich auf branchenspezifische Lösungen spezialisiert.

Ein weiterer Vorteil: Hybride Kartendienste wie SmartMaps stellen spezielle Kartenprofile für Menschen mit eingeschränktem Sehvermögen zur Verfügung. Damit können Unternehmen eine Kartenlösung nutzen, die den Anforderungen des am 28. Juni in Kraft tretenden Barrierefreiheitsstärkungsgesetzes (BFSG) entspricht.

Rechtliche Aspekte

Mit der Integration von Karten eines Drittanbieters in eine Website sind auch rechtliche Anforderungen verbunden, auf die Unternehmen achten sollten. Im Vordergrund stehen dabei Datenschutz- und Lizenzbedingungen.

Datenschutzbestimmungen

Die Einbindung externer Kartendienste löst regelmäßig Datenübertragungen an Drittanbieter aus. Gemäß DSGVO müssen Nutzer über Art und Umfang der Datenverarbeitung informiert werden und dieser zustimmen. Kritische Punkte dabei sind insbesondere:

• IP-Adressen-Speicherung
• Tracking-Cookies
• Standortdatenverarbeitung

SmartMaps lässt sich DSGVO-konform nutzen und bietet Vorteile durch serverseitige Geokodierung, die sensible Nutzerdaten schützt – ein Feature, das andere Marktbegleiter nur unzureichend implementieren. Außerdem verzichtet SmartMaps bewusst auf clientseitige Cookies, die persistente Speicherung von Sessions und Cross-Site-Tracking-Pixel.

Lizenzbedingungen

Jeder Kartendienst unterliegt spezifischen Nutzungsbedingungen. Kommerzielle Anbieter limitieren oft die Anzahl maximaler Anfragen pro Tag sowie die zulässigen Einsatzgebiete. Anpassungsmöglichkeiten und ein hohes Nutzungsvolumen können schnell teuer werden.

Zwar erlauben manche Open-Source-Lösungen die uneingeschränkte Nutzung, jedoch meist nur für private Zwecke. Für kommerzielle Zwecke können Kosten anfallen, insbesondere dann, wenn die Karten als iFrame eingebunden sind und dadurch Serverlast beim Open-Source-Anbieter erzeugt wird. Zudem verlangen Open-Source-Kartenanbieter die korrekte Angabe der genutzten Lizenz.
Mehr Informationen zur Nutzung von OSM stellen wir Ihnen gerne hier zur Verfügung.

Technische Implementierung

Beim Einbinden von Maps in eine Webseite sind auch Aspekte der User Experience sowie der Barrierefreiheit zu beachten. Hier kommt es zum Beispiel darauf an, dass die Karte auf allen Geräten (PC / Laptop, Smartphone und Tablet) problemlos nutzbar ist.

Responsive Design

Responsive Design bedeutet, dass sich eine Webseite und damit auch eine darin eingebundene Karte an das vom Nutzer verwendete Gerät anpassen. Dabei müssen Nutzbarkeit, Lesbarkeit und Bedienbarkeit sowohl auf dem kleinen Bildschirm eines Smartphones als auch auf einem großen PC-Bildschirm gewährleistet sein. CSS-Techniken wie "Viewport Units" und "Media Queries" gewährleisten eine optimale Darstellung.

Hier ein Beispiel für ein CSS, das zur Einbindung einer Karte in eine Webseite verwendet werden kann:


.map-container {
  width: 100vw;
  height: 50vh;
  max-width: 1200px;
  margin: 0 auto;
}


Dieses CSS sorgt für das Styling eines Containers mit der Klasse .map-container. Hier ist eine Erklärung der einzelnen Eigenschaften:

• width: 100vw; → Der Container nimmt die gesamte Breite des Viewports ein (100% der sichtbaren Bildschirmbreite).
• height: 50vh; → Die Höhe des Containers beträgt 50% der Viewport-Höhe.
• max-width: 1200px; → Begrenzt die maximale Breite des Containers auf 1200 Pixel.
• margin: 0 auto; → zentirert den Container horizontal innerhalb des übergeordneten Elements.

Barrierefreiheit

Neben dem bereits erwähnten BFSG, das im Juni 2025 in Kraft tritt, sind im Zusammenhang mit Barrierefreiheit auch die Web Content Accessibility- (WCAG-) Richtlinien relevant.

Die Version WCAG 2.1 umfasst die vier Grundprinzipien:

• Wahrnehmbarkeit
• Bedienbarkeit
• Verständlichkeit
• Robustheit

Um diesen Prinzipien zu entsprechen, sollten Webseiten zum Beispiel die folgenden Funktionen und Eigenschaften bereitstellen:

• Tastaturnavigation
• Lesbare und verständliche Inhalte
• Kontrastreiche Farbpaletten
• Alternative Textbeschreibungen für Nicht-Text-Inhalte wie zum Beispiel Bilder oder Videos

Viele Kartendienste vernachlässigen manche dieser Aspekte, während SmartMaps spezielle Accessibility-Profile für eine barrierefreie Darstellung bietet.