Zum Inhalt springen

Interaktive Website erstellen: Praktischer Leitfaden zur Integration einer benutzerdefinierten Karte

Die Integration einer interaktiven Karte auf einer Website beschränkt sich nicht darauf, einen HTML-Code-Schnipsel in eine Seite einzufügen. Die Wahl…

Développeuse web intégrant une carte interactive sur son écran d'ordinateur dans un bureau moderne

Die Integration einer interaktiven Karte auf einer Website beschränkt sich nicht darauf, einen HTML-Code in eine Seite einzufügen. Die Wahl des Kartenanbieters, die Integrationsmethode und die gesetzlichen Anforderungen im Zusammenhang mit Drittanbieterspuren beeinflussen sowohl die technische Leistung als auch die Benutzererfahrung. Dieser Leitfaden analysiert die konkreten Reibungspunkte, die das Hinzufügen einer benutzerdefinierten Karte mit sich bringt, vom RGPD-Consent bis zu den versteckten Kosten der APIs.

Drittanbieter-Tracker und RGPD-Consent: die Voraussetzung, die die Karte stellt

Bevor überhaupt von iFrame oder Skript die Rede ist, muss ein rechtlicher Punkt geklärt werden. Sobald eine Drittanbieter-Karte auf Ihrer Seite geladen wird, kann sie Cookies oder Tracker im Browser des Besuchers hinterlassen.

Die Vorschriften verlangen, dass diese Tracker nach ihrer Herkunft und ihrem Zweck identifiziert werden. Wenn sie eine Zustimmung erfordern, muss diese vor dem Setzen oder Lesen des Trackers eingeholt werden. Die Ablehnung muss ebenso einfach sein wie die Zustimmung, und die Wahl muss später geändert werden können.

In der Praxis bedeutet dies, dass eine direkt im HTML eingebettete Google Maps- oder Mapbox-Karte mit der Seite geladen wird, bevor eine Interaktion stattfindet. Wenn Ihr Zustimmungshinweis noch keine Antwort erhalten hat, könnten Sie potenziell gegen die Vorschriften verstoßen. Es gibt zwei technische Lösungen, um diesen Fall ordnungsgemäß zu verwalten, und jede hat ihre Kosten in Bezug auf die Benutzererfahrung.

  • Das verzögerte Laden (lazy consent): Die Karte wird erst nach ausdrücklicher Zustimmung zu den Cookies geladen. In der Zwischenzeit sieht der Besucher einen statischen Platzhalter (ein Bild der Karte oder eine Informationsnachricht). Juristisch zuverlässig, aber der Besucher, der die Cookies ablehnt, wird die Karte niemals sehen.
  • Die selbstgehostete Karte mit OpenStreetMap- oder MapLibre-Kacheln: Es werden keine Drittanbieter-Tracker gesetzt, da die Kartendaten von Ihrer eigenen Infrastruktur oder von Servern bereitgestellt werden, die keine Cookies setzen. Komplexer einzurichten, aber die Zustimmung ist kein Hindernis mehr für die Anzeige.
  • Das Fallback-Bild: Ein klickbarer Screenshot, der nach Zustimmung zur Karte im Vollbildmodus weiterleitet. Minimalistische Herangehensweise, geeignet für Schaufenster-Websites mit nur einem Standort.

Testen Sie Ihre Website ohne vorherige Zustimmung, im privaten Modus, um zu überprüfen, welche Tracker tatsächlich von der Karte gesetzt werden. Es ist ein schneller Audit, den viele Entwickler vernachlässigen.

Um mehr über Web-Kartografie auf Portail Web zu erfahren, sind die Integrationsschritte dort mit konkreten Beispielen je nach Plattform detailliert beschrieben.

Webdesigner plant die Integration einer benutzerdefinierten Karte auf einer Website mit gedruckten Entwürfen

Reale Kosten von Karten-APIs: Google Maps, Mapbox und kostenlose Alternativen

Die von den Hauptkartenanbietern angegebene Kostenlosigkeit verbirgt eine Preisliste, die von den tatsächlich genutzten Funktionen abhängt. Eine einfache Kartenanzeige, eine Adresssuche und eine Routenberechnung werden nicht zum gleichen Preis berechnet.

Google Maps Platform

Google gewährt 10.000 kostenlose Ladevorgänge pro Monat für die Anzeige von Karten. Darüber hinaus erfolgt die Abrechnung mit 7 Dollar für 1.000 zusätzliche Ladevorgänge. Geocoding, Routen und Street View-Ansichten unterliegen unterschiedlichen Preismodellen. Eine stark frequentierte Website, die mehrere dieser Dienste nutzt, kann ihre Rechnung steigen sehen, ohne dass sich die Anzahl der angezeigten Karten geändert hat.

Mapbox

Mapbox bietet eine großzügigere kostenlose Schwelle: 50.000 kostenlose Ladevorgänge pro Monat, danach 5 Dollar für 1.000 Ladevorgänge. Der visuelle Stil der Mapbox-Karten bietet mehr Spielraum für Anpassungen als Google Maps, was ihre Annahme durch redaktionelle Projekte und Tourismusbüros erklärt.

OpenStreetMap und MapLibre

OpenStreetMap stellt die Kartendaten unter einer freien Lizenz zur Verfügung. MapLibre GL JS, die Client-seitige Rendering-Bibliothek, ermöglicht die Anzeige dieser Daten, ohne von einem kostenpflichtigen Dienst abhängig zu sein. Die Kehrseite: Das Hosting der Vektorkacheln und die Konfiguration des Renderings liegen in Ihrer Verantwortung. Die Dokumentation von MapLibre GL JS v6 weist auf Integrationsbeschränkungen hin, die mit Modulen und dem Laden des Workers verbunden sind, was eine Frontend-Kompetenz erfordert, die nicht alle Projekte intern haben.

Die Wahl des Anbieters kann nicht nur auf den Preis der Anzeige basieren. Die Gesamtkosten hängen vom Verkehrsvolumen, den aktivierten Funktionen (Geocoding, Routing, Orte) und der technischen Fähigkeit des Teams ab, eine selbstgehostete Lösung zu warten.

Iframe gegen Skript: Was jede Methode für die Suchmaschinenoptimierung bedeutet

Die Mehrheit der Tutorials schlägt das iFrame als Standard-Integrationsmethode vor. Das Kopieren und Einfügen eines Google Maps-Integrationslinks in ein iFrame dauert dreißig Sekunden. Das Ergebnis wird korrekt auf der Seite angezeigt.

Das Problem liegt auf der SEO-Seite. Google garantiert nicht, dass der Inhalt eines iFrames mit der Seite verbunden ist, die ihn hostet. Die Standortkarten, die Namen der Routen und die in die Karte integrierten Beschreibungen bleiben in einem separaten Dokument, das für den Crawler im Kontext Ihrer Seite unsichtbar ist. Eine Karte, die reich an nützlichen Daten für die lokale Suchmaschinenoptimierung ist, verliert ihren gesamten SEO-Wert, wenn sie in einem iFrame bereitgestellt wird.

Die Integration über ein Skript (JavaScript) lädt die Karte direkt in das DOM der Seite. Die zugehörigen Daten (Marker, Popups, Karten) sind Teil des HTML-Dokuments. Diese Methode erfordert mehr Arbeit, ermöglicht es jedoch, die kartografischen Informationen so zu strukturieren, dass sie von Suchmaschinen genutzt werden können.

Zwei Entwickler arbeiten an der Integration einer benutzerdefinierten Karte in eine interaktive Website

Für eine Schaufenster-Website mit nur einer Adresse bleibt das iFrame akzeptabel. Für eine Website, die ein Netzwerk von Punkten, Routen oder detaillierten Karten anzeigt, schützt die Integration über ein Skript die Suchmaschinenoptimierung des kartografischen Inhalts.

Das tatsächliche Engagement auf einer interaktiven Karte messen

Eine Karte anzuzeigen, reicht nicht aus. Zu wissen, ob die Besucher sie tatsächlich nutzen, rechtfertigt die technische Investition und die möglichen Kosten der API. Produktionsdaten aus territorialen Karten zeigen aussagekräftige Ergebnisse: 5 Minuten 56 Sekunden durchschnittliche Sitzungsdauer auf einer interaktiven Territorienkarte und 41,4 % der Sitzungen öffnen mindestens eine Karte oder Standortbeschreibung.

Diese Metriken sind nicht auf alle Websites übertragbar. Ein E-Commerce mit einem Store Locator wird nicht die gleichen Sitzungsdauern erzielen wie ein Tourismusbüro. Das Messwerkzeug (Google Analytics, Matomo, benutzerdefinierte JavaScript-Ereignisse) muss so konfiguriert werden, dass es die spezifischen Interaktionen mit der Karte erfasst: Klicks auf die Marker, Öffnen von Karten, Ändern von Filtern, Wechsel in den Vollbildmodus.

Ohne diese Nachverfolgung bleibt die Karte ein dekoratives Element, dessen Nutzen niemand bewerten kann. Mit ihr wird sie zu einem messbaren Bestandteil des Nutzererlebnisses, der ihren Erhalt oder ihren Austausch durch eine leichtere Lösung rechtfertigen kann.

Interaktive Website erstellen: Praktischer Leitfaden zur Integration einer benutzerdefinierten Karte