So fügen Sie eine OpenStreetMap-Karte (Leaflet) zu einer Turbosite-Website hinzu

OpenStreetMap (OSM) ist eine kostenlose Karten-Datenbank und eine offene Alternative zu Google Maps und Yandex Maps. Leaflet ist die beliebteste JavaScript-Bibliothek zur Anzeige von OSM auf Websites. Vollständig kostenlos, ohne API-Schlüssel, ohne Limits. Ideal für Projekte, bei denen kostenpflichtige Dienste vermieden werden sollen. Die Einrichtung dauert 5–10 Minuten.

Was Sie benötigen

• Die Koordinaten des Ortes, den Sie anzeigen möchten (Breitengrad/Längengrad) – diese finden Sie auf openstreetmap.org (Rechtsklick auf den Punkt → „Show address“)
• Eine veröffentlichte Website auf Turbosite
• 5–10 Minuten Zeit

Schritt 1. Koordinaten Ihres Standorts abrufen

1. Öffnen Sie openstreetmap.org.
2. Suchen Sie nach der gewünschten Adresse oder Organisation.
3. Rechtsklick auf den gewünschten Punkt → „Show address“.
4. In der Adresszeile erscheinen Koordinaten im Format 52.5200,13.4050 (Breitengrad, Längengrad). Notieren Sie diese.

Schritt 2. HTML-Code vorbereiten

Im Gegensatz zu Google Maps und 2GIS gibt es bei OSM keinen fertigen iframe-Konstruktor – die Karte wird über die Leaflet-Bibliothek eingebunden. Hier ist der fertige Code, den Sie verwenden können:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
  var map = L.map('map').setView([52.5200, 13.4050], 15);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.marker([52.5200, 13.4050]).addTo(map)
    .bindPopup('Hier befinden wir uns')
    .openPopup();
</script>

Was Sie anpassen müssen:

• 52.5200, 13.4050 — ersetzen Sie beide Werte durch Ihre Koordinaten (Breitengrad, Längengrad).
• 15 — Zoomstufe der Karte (13–17 für Städte; je höher, desto näher).
• Hier befinden wir uns — Text im Popup-Fenster über der Markierung.
• height: 400px — Höhe der Karte.

Schritt 3. Code in Turbosite einfügen

Die Karte erscheint an einer bestimmten Stelle der Seite.

1. Öffnen Sie Ihre Website in Turbosite.
2. Fügen Sie den Block „HTML-Code“ an der gewünschten Stelle der Seite hinzu (normalerweise im Block „Kontakte“).
3. Fügen Sie den vorbereiteten Leaflet-Code ein.
4. Speichern Sie die Änderungen.
5. Veröffentlichen Sie die Website.

📷 [Turbosite-Screenshot – wird hinzugefügt: HTML-Code-Block im Seitenkörper mit Leaflet-Code].

Schritt 4. Überprüfen, ob die Karte funktioniert

1. Öffnen Sie die veröffentlichte Website.
2. Scrollen Sie zum Kartenblock – die OpenStreetMap-Karte mit der Markierung sollte geladen werden.
3. Klicken Sie auf die Markierung – ein Popup mit Ihrem Text sollte erscheinen.
4. Überprüfen Sie die Zoomfunktion (Mausrad oder Pinch-Geste auf Mobilgeräten).

Häufig gestellte Fragen

Warum OSM anstelle von Google Maps verwenden? Die Hauptgründe: Vollständig kostenlos ohne Limits und API-Schlüssel, keine Registrierung erforderlich, kein Risiko einer Abschaltung. Der Nachteil: Die Daten können in kleineren Regionen weniger aktuell sein.

Kann ich mehrere Markierungen hinzufügen? Ja, wiederholen Sie L.marker([Breitengrad, Längengrad]).addTo(map).bindPopup('Text'); für jede Markierung.

Die Karte verlangsamt die Website. Leaflet und die OSM-Kacheln werden bei Bedarf geladen. Wenn sich nur eine Karte auf der Seite befindet, gibt es keine Probleme.

Kann ich die Karte in meinen Firmenfarben gestalten? Ja, aber nicht über die Standard-OSM-Kacheln. Verwenden Sie Drittanbieter-Kachel-Provider (Mapbox, Stadia Maps, Thunderforest) – einige sind bei geringer Auslastung kostenlos, andere sind kostenpflichtig.

Muss ich die OpenStreetMap-Attribution angeben? Ja, das ist zwingend erforderlich – eine Lizenzanforderung. Im obigen Code ist sie bereits in der Zeile attribution enthalten.

Weiterführende Links

• Leaflet Dokumentation – vollständiges Referenzhandbuch
• Leaflet Quick Start Guide – schnelle Einführung
• OpenStreetMap – die Karte selbst
• Alternative Kachel-Provider – zum Ändern des Kartenstils