Interaktive Karten
Interaktive Lagekarten mit POIs und Erreichbarkeiten erstellen, gestalten und als Vorlage speichern (onOffice).
Zuletzt aktualisiert: 24. August 2026
Inhaltsverzeichnis
Was bringt es?
Deine eigenen Maps für Websites, Landingpages, Inserate, Web-Exposés. Karten können automatisch generiert werden zB beim Anlegen eines neuen Objekts in Propstack. Zielgruppe kann (muss aber nicht) in Propstack ausgewählt werden
Markenpräsentation & Kundenbegeisterung. Mit den interaktiven Karten kannst du dein Markenimage effektvoll darstellen und deine Kunden mit ansprechenden, leicht verständlichen Lageinformationen begeistern.
Ob in digitalen Exposés, auf deiner Webseite, in Social-Media-Kampagnen oder gedruckten Broschüren – unsere Karten fügen sich harmonisch in deine Marketingmaterialien ein und betonen deine Professionalität als Immobilienmakler.
Erklärvideo für interaktive Karten
💡Interaktive Lagekarte erstellen & konfigurieren - Schritt-für-Schritt Anleitung
Grundeinstellungen der interaktiven Lagekarte
Ziel dieser Anleitung: Eine Lagekarte mit individuellen POIs und passenden Kartenstilen erstellen.
Die Lagekarte ist ein zentrales Element zur Darstellung der Umgebung eines Objekts. Sie hilft potenziellen Interessenten, sich schnell einen Überblick über die Infrastruktur und Attraktivität der Lage zu verschaffen. In diesem Abschnitt richten wir die Lagekarte so ein, dass sie optimal auf Ihre Anforderungen abgestimmt ist.
- Immobilie auswählen
- Öffnen Sie OnOffice und wählen Sie eine Immobilie als Vorlage aus.
- Über den Reiter Lage gelangen Sie zum AreaButler.
- Lagekarte erstellen
- Klicken Sie nun oben rechts auf „Karte erstellen“, um eine neue Lagekarte zu generieren.
- Klicken Sie nun oben rechts auf „Karte erstellen“, um eine neue Lagekarte zu generieren.
- POI Detailfilter konfigurieren
- Nachdem die Karte erfolgreich erstellt wurde, wird diese automatisch geöffnet.
- Anschließend können über den Reiter “Editor” die Lagekarte weiter konfiguriert werden.
- Über den Reiter “Points-of-Interest” (POI) können Sie die Anzahl der angezeigten POIs Ihren Vorstellungen entsprechend anpassen. Standardmäßig sind 10 POIs pro Kategorie eingestellt ( also z.B. 10 Bushaltestellen, 10 Restaurants, 10 Parks).
- Tragen Sie Ihre gewünschte Anzahl in das Zahlenfeld ein und klicken Sie auf Anwenden.
- Speichern Sie Ihre Einstellungen über das Feld unten rechts, damit der AreaButler die gewünschte Konfiguration übernimmt.
- Kartenstil & Menüstil auswählen
- Über den Reiter Konfiguration können Sie den Kartenstil und das Menü bearbeiten.
- Wählen Sie zwischen den Stilen Classic und Basic aus und klicken Sie unten rechts auf Speichern.
- Sollten Sie einen eigenen Kartenstil wünschen, kommen Sie gerne auf uns zu - wir designen Ihnen einen individuellen Stil nach Ihren Wünschen.
- Für das Menü gibt es zwei Optionen: Standard (der Kunde sieht ein größeres Menü mit mehr Details):
- und Minimal (kompaktere Ansicht, hier bekommt der Kunde die Details durch einen Klick auf den entsprechenden POI und nicht direkt im Menü angezeigt):
- Speichern Sie Ihren ausgewählten Menü-Stil.
- Icons und Symbole anpassen
- Bevor Sie sich der Symbolgröße widmen, scrollen Sie nach unten zum Feld “Karten Icon”.
- Möchten Sie ein eigenes Kartenicon nutzen, können Sie dieses als png, jpg oder svg Datei hochladen.
- Auch hier können Sie gerne auf uns zukommen - wir designen euch gern ein individuelles Icon, um Ihre Marke zu repräsentieren.
- Nachdem Sie die Datei erfolgreich hochgeladen haben, scrollen Sie zurück nach oben und passen Sie die Größe über den Symbolgrößenregler an.
- Speichern Sie erneut.
- Zusätzliche Einstellungen:
- Anonymisierte Karte an/aus: Über den oberen Schalter im schwarz hinterlegten Feld können Sie festlegen, ob Sie die genaue Adresse veröffentlichen möchten, oder nicht. Ist die Funktion “Genaue Adresse nicht veröffentlicht” aktiviert, wird der Standort-Dongle auf der Karte zunächst leicht versetzt angezeigt.
- Standort-Dongle ein-/ausblenden: Möchten Sie den Standtort-Dongle ganz ausblenden, können Sie dies tun, indem Sie den Haken bei “Icon auf anonymisierter Karte anzeigen” abwählen. Dadurch wird der Dongle bei anonymisierter Karte komplett ausgeblendet.
- Google Street View aktivieren/deaktivieren: Bei Anklicken des Standort-Dongles kann bei Bedarf ein Google-Street View Link angezeigt werden. Falls gewünscht, setzen Sie den entsprechenden Haken, um diese Funktion zu aktivieren.
- POIs gruppieren bei Rauszoomen: Wenn der Haken bei dieser Funktion gesetzt ist, erlaubt dies eine kompakte Darstellung, bei der einzelne POIs erst beim Reinzoomen sichtbar werden und beim Rauszoomen in Gruppen zusammengefasst sind:
- Isochronen ausblenden: Falls keine Erreichbarkeitsbereiche (hier die roten, lila und schwarzen Linien) angezeigt werden sollen, können Sie einen Haken bei “Isochronen ausblenden” setzen.
- Speichern Sie Ihre Auswahl ab.
- Primärfarbe anpassen
- Die Primärfarbe zieht der AreaButler automatisch aus Ihrem CRM und muss in der Regel nicht manuell eingestellt werden.
- Bei Bedarf kann diese für ein alternatives Erscheinungsbild invertiert werden. Hierfür unter dem Feld “Primärfarbe” den Haken bei “Primärfarbe invertieren” setzen.
- Anschließend wie gehabt auf Speichern klicken.
- Grundeinstellungen als Vorlage speichern
- Wenn Sie mit Ihrer Konfiguration der Lagekarte zufrieden sind, können Sie diese als Standartvorlage abspeichern.
- Wechseln Sie hierfür in den Reiter Karten und legen Sie die aktuelle Adresse, die sie gerade bearbeitet haben als Standardvorlage fest.
- Und das war’s auch schon! Zukünftig werden nun alle Lagekarten automatisch mit diesen Grundeinstellungen erstellt.
Falls Sie Fragen haben oder Unterstützung benötigen, steht Ihnen unser Customer Success Team jederzeit zur Verfügung. Viel Erfolg mit dem AreaButler!
📌 Weiterführende Links: 🔹 Support-Bereich:
🔹 Support-Termin vereinbaren:
🗺️ Interaktive Karten in der Praxis
🗺️ Beispiel 1
Settings: Classic-Menu, generisch, POI-Details-Filter auf Anzahl = 8, beim ersten Laden Hinweis auf ausgewählte POIs
https://app.areabutler.de/embed/?token=16ff425c3713c4a9337da6a8d42fd46738d32cfc895b185ab0600de75a2a392f99c114b479bd5f2bd53267bf69a841387e52665678b0efc0b2d2aa0e🗺️ Beispiel 2
Settings: Classic-Menu, Neu: eingeklapptes Menü beim ersten load, Zielgruppe: Aktive Senioren, nur POIs für Zielgruppe
https://app.areabutler.de/embed?token=08c243fe333b195e2f5784c51a70392292855ad2676c1a44930b166fa7e859e7dd8ccd212d70b4679dffbe3079a73a4f89413dd53b61638b7f842f2b&isAddressShown=true🗺️ Beispiel 3
Settings: Minimal-Menu, Kreatives Design, einfacherer Nutzerführung durch weniger Details
https://app.areabutler.de/embed/?token=655e5f2e376af33d16824232512e741f29b97f94ae090bcfd19fec3969243af0105edfb1749eff87c8d402d69be7726a12351e3162885015e045f02c💡 Hinweise
Wenn die interaktive Karte in deine Seite eingebunden wird, wird in der Regel ein iframe verwendet. Hierbei ist insbesondere in der Mobilansicht darauf zu achten, dass die Karte ohne etwaige Ränder angezeigt wird, da ansonsten das Menu und andere Funktionen nicht richtig dargestellt werden können.
Sofern die umgebenden html-Elemente ein padding oder margin ausweisen, empfehlen wir – um die Anpassungen an deiner Seite möglichst überschaubar zu halten – folgendes CSS auf das iframe anzuwenden.
@media screen and (max-width: 800px) {
iframe.areabutler {
margin: 0px -20px;
width: 100%;
width: -webkit-fill-available;
width: -moz-available;
}
}Fragen, Ideen & Feedback ?
☎️ Anrufen
War dieser Artikel hilfreich?