Eine Karte ist besonders sinnvoll, wenn dein Angebot an einen festen Standort gebunden ist, zum Beispiel bei einem Geschäft, Café, Büro oder einer Praxis.
Du kannst dafür entweder das integrierte Kartenelement nutzen oder externe Dienste wie Google Maps einbinden.
🎬 Am Ende des Artikels findest du unsere aktuelle Videoanleitung!
Es gibt drei Möglichkeiten, eine Karte auf deiner Onepage-Seite hinzuzufügen.
Möglichkeit 1: Onepage-Element „Karte“ (OpenStreetMap)
So funktioniert’s:
Layoutentwurf hinzufügen
Element „Karte“ auswählen
Adresse eingeben
Falls deine Adresse nicht gefunden wird, kannst du sie in OpenStreetMap hinzufügen. Sobald die Adresse eingetragen ist, wird sie auch in Onepage angezeigt.
Möglichkeit 2: Google Maps über API einbinden
API-Schlüssel erstellst du direkt bei Google. Hier findest du die offizielle Anleitung von Google.
Die Anleitung ist sehr ausführlich, daher hier noch einmal die wichtigsten Schritte in Kürze:
1. API-Schlüssel erstellen (Google Maps)
Melde dich in der Google Cloud Console an.
Gehe zu „Anmeldedaten“.
Klicke auf „Anmeldedaten erstellen“ → „API-Schlüssel“.
Optional: API-Schlüssel einschränken, um die Nutzung zu sichern.
Klicke auf „Erstellen“. Dein API-Schlüssel wird angezeigt und kann in Onepage verwendet werden.
Wichtig: Damit die Karte in Onepage angezeigt wird, muss der Google Maps API-Schlüssel erstellt, die Maps JavaScript API aktiviert und ein Google-Billing-Konto hinterlegt sein.
2. In Onepage einfügen:
Einstellungen → Projekteinstellungen → Integrationen → Google Maps
Alternativ kannst du den Google API-Schlüssel direkt im Abschnitt einfügen.
Möglichkeit 3: Einbindung per Custom Code (ab Essential-Plan)
Mit Custom Code kannst du Google Maps oder auch andere Kartendienste wie Mapbox oder Leaflet auf deiner Onepage-Seite integrieren.
Dafür benötigst du einen kostenpflichtigen Plan (ab dem Essential-Tarif), da Custom Code nur dann freigeschaltet ist.
Du kannst den Code entweder:
in einem einzelnen Abschnitt einfügen (z. B. auf einer bestimmten Seite),
oder für das gesamte Projekt bzw. die komplette Website hinterlegen (in den Projekteinstellungen).
Im Video unten erfährst du, wie du Custom Code einfügst. Weitere Informationen findest du in unseren Hilfecenter-Artikeln.
Diese Methode eignet sich besonders für individuelle Anforderungen oder erweiterte Darstellungen.
Für die meisten Anwendungsfälle empfehlen wir die Integration über API oder das Standard-Element.
📝 Mit diesen drei Möglichkeiten kannst du eine Karte flexibel in deine Onepage-Website integrieren, je nachdem, welche Anforderungen du hast.
Video-Tutorial
Für einen besseren Überblick über den Ablauf kannst du dir auch unser Video-Tutorial unten ansehen:
Häufig gestellte Fragen (FAQ)
Funktioniert die Karte auch auf mobilen Geräten?
Funktioniert die Karte auch auf mobilen Geräten?
Ja, das Onepage-Kartenelement und Google Maps passen sich automatisch an mobile Geräte an. Alternativ kannst du die Ansicht für mobile Geräte weiter optimieren, indem du Abschnitte duplizierst und separate Ansichten für Desktop und Mobil erstellst. Weitere Informationen zu diesem Thema findest du in unserem Help Center.
Kann ich mehrere Standorte auf einer Karte anzeigen?
Kann ich mehrere Standorte auf einer Karte anzeigen?
Mit dem Standard-Kartenelement nur ein Standort. Für mehrere Standorte wäre Google Maps API oder Custom Code notwendig.
Welche Kosten entstehen für die Nutzung von Google Maps?
Welche Kosten entstehen für die Nutzung von Google Maps?
Das Einbinden über API ist in Onepage kostenlos, Google kann allerdings Kosten abhängig von der Nutzung berechnen.
Warum wird meine Adresse nicht angezeigt?
Warum wird meine Adresse nicht angezeigt?
Prüfe zuerst, ob die Adresse korrekt in OpenStreetMap eingetragen ist. Wenn nicht, kannst du sie über diesen Link hinzufügen.
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂