Interaktive Karten
Interaktive Lagekarten mit POIs und Erreichbarkeiten erstellen, gestalten und als Vorlage speichern.
Zuletzt aktualisiert: 7. Oktober 2026
Anleitung für Propstack
Inhaltsverzeichnis
Was bringt es?
Deine eigenen Karten für Websites, Landingpages, Inserate und Web-Exposés. Karten können automatisch entstehen, z. B. beim Anlegen eines neuen Objekts in Propstack. Die Zielgruppe kannst du in Propstack auswählen, musst du aber nicht: Bleibt das Feld leer, ermittelt die KI die passende Zielgruppe aus Standort- und Objektdaten.
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
Ziel: Eine Lagekarte mit passenden POIs und deinem Kartenstil erstellen und als Vorlage für alle künftigen Karten festlegen.
Die Lagekarte zeigt Interessenten auf einen Blick, wie gut Infrastruktur und Umgebung eines Objekts sind. Am besten richtest du einmal eine Karte sauber ein und legst sie als Vorlage fest – alle weiteren Karten übernehmen dann diese Einstellungen.
- AreaButler in Propstack öffnen
- Öffne Propstack und gehe zur Objektübersicht.
- Wähle ein Objekt aus, das als Vorlage für künftige Lagekarten dienen soll.
- Öffne das Objekt und wechsle zu den Erweiterungen, um den AreaButler zu starten.
- Lagekarte erstellen
- Lass die Zielgruppe für die Vorlage leer, damit zunächst eine generische Karte entsteht.
- Klicke auf der Startseite des AreaButler auf „Karte erstellen“. Die Karte öffnet sich danach automatisch im Karteneditor.
- Im Karteneditor zurechtfinden
- Oben in der Karte findest du die Navigations-Leiste mit eigenen Seiten für KI, Daten und Objekt. So springst du ohne Umwege in den passenden Bereich.
- Häufige Aktionen erreichst du über das Editor-Menü.
- POIs festlegen
- Lege fest, welche POI-Kategorien angezeigt werden und wie viele POIs pro Kategorie erscheinen. Weniger POIs (z. B. 5 pro Kategorie) machen die Karte übersichtlicher.
- Speichere deine Änderungen.
- Kartenstil wählen
- Den Kartenstil wählst du über eine Auswahlliste. Zusätzlich kannst du dort POIs und einzelne Bedienelemente der Karte ausblenden – je nachdem, ob die Karte ins Exposé, auf eine Landingpage oder in die interne Arbeit gehört.
- Eigener Kartenstil: Mit dem integrierten Karteneditor im Unternehmensprofil passt du Farben, POI-Icons und das gesamte Kartendesign bis hin zur Schriftart an deine CI an. Änderungen siehst du sofort in einer Live-Vorschau.
- Menüstil und Kundenansicht prüfen
- Für das Kartenmenü stehen mehrere Stile zur Verfügung, darunter ein minimaler Stil und ein Referenzstil für Referenzkarten.
- In der eingebetteten Karte steht die Adresse oben links; Adressanzeige und Sprachauswahl sind getrennte Elemente.
- Öffne den öffentlichen Link der Karte in einem neuen Browser-Tab, um die Ansicht deiner Kundinnen und Kunden zu prüfen.
- Anonymisierte Karte einrichten
- Wenn der genaue Standort nicht sichtbar sein soll, nutze die anonymisierte Darstellung. Optional blendest du den Objekt-Marker ganz aus.
- AreaButler legt in Propstack eigene Felder für Karten mit und ohne Adresse an. So setzt du gezielt die passende Variante ein, z. B. die anonyme Karte auf deiner Website.
- Weitere Kartenelemente einstellen
- Google-Street-View-Link: Bei Klick auf das Objekt-Icon springen Interessenten direkt zu Google Street View.
- POI-Gruppierung: Beim Herauszoomen werden POIs gebündelt, die Karte bleibt übersichtlich.
- Isochronen: Erreichbarkeiten zu Fuß, mit dem Rad oder mit dem Auto ein- oder ausblenden.
- Kartenmenü beim ersten Laden einklappen: sorgt für eine kompakte Ansicht im iFrame.
- Tour: Eine geführte Tour leitet Interessenten in der eingebetteten Karte Schritt für Schritt durch die Lage. Touren lassen sich automatisch erzeugen.
- Die Option Referenzkarte brauchst du nur für Referenzkarten (siehe eigene Anleitung).
- Icons und Farben anpassen
- Dein Objekt-Icon und die Farben deiner POI-Icons legst du im Unternehmensprofil in den Karteneinstellungen fest. Die Live-Vorschau zeigt dir sofort das Ergebnis.
- Vorlage festlegen
- Öffne im AreaButler oben den Reiter Karten. Dort siehst du alle deine Karten.
- Trage bei deiner Karte im Feld Notiz z. B. „Vorlage“ ein. Ein Notizfeld gibt es auch direkt im Karteneditor, damit kannst du die Karte schon beim Erstellen benennen.
- Klicke auf „Als Vorlage festlegen“. Ab jetzt gelten diese Einstellungen für alle künftigen Karten.
Damit sind die Grundeinstellungen deiner Lagekarte fertig.
📌 Weiterführende Links:
🗺️ Interaktive Karten in der Praxis
🗺️ Beispiel 1
Einstellungen: Standard-Menü, generisch, 8 POIs pro Kategorie, beim ersten Laden Hinweis auf ausgewählte POIs
🗺️ Beispiel 2
Einstellungen: Standard-Menü, beim ersten Laden eingeklappt, Zielgruppe „Aktive Senioren“, nur POIs für diese Zielgruppe
🗺️ Beispiel 3
Einstellungen: minimales Menü, kreatives Design, einfachere Nutzerführung durch weniger Details
💡 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;
}
}Anleitung für onOffice
Inhaltsverzeichnis
Was bringt es?
Deine eigenen Karten für Websites, Landingpages, Inserate und Web-Exposés. Karten entstehen per Klick: In onOffice startest du AreaButler über das Marketplace-Symbol und wählst „Interaktive Karte erstellen“ oder „Karte und Texte erstellen“. Auf Wunsch läuft die Erstellung auch automatisch über den onOffice-Prozessmanager. Die Zielgruppe kannst du in onOffice im Reiter Details in den AreaButler-Feldern wählen, musst du aber nicht: Bleibt das Feld leer, ermittelt die KI die passende Zielgruppe aus Standort- und Objektdaten.
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: Eine Lagekarte mit passenden POIs und deinem Kartenstil erstellen und als Vorlage für alle künftigen Karten festlegen.
Die Lagekarte zeigt Interessenten auf einen Blick, wie gut Infrastruktur und Umgebung eines Objekts sind. Am besten richtest du einmal eine Karte sauber ein und legst sie als Vorlage fest – alle weiteren Karten übernehmen dann diese Einstellungen.
- Immobilie auswählen
- Öffne onOffice und wähle eine Immobilie als Vorlage aus.
- Über den Reiter Lage gelangst du zum AreaButler.
- Lagekarte erstellen
- Klicke oben rechts auf „Karte erstellen“. Die Karte öffnet sich danach automatisch im Karteneditor.
- Im Karteneditor zurechtfinden
- Oben in der Karte findest du die Navigations-Leiste mit eigenen Seiten für KI, Daten und Objekt. So springst du ohne Umwege in den passenden Bereich.
- Häufige Aktionen erreichst du über das Editor-Menü.
- POIs festlegen
- Lege fest, welche POI-Kategorien angezeigt werden und wie viele POIs pro Kategorie erscheinen. Weniger POIs (z. B. 5 pro Kategorie) machen die Karte übersichtlicher.
- Speichere deine Änderungen.
- Kartenstil und Menüstil wählen
- Den Kartenstil wählst du über eine Auswahlliste. Zusätzlich kannst du dort POIs und einzelne Bedienelemente der Karte ausblenden – je nachdem, ob die Karte ins Web-Exposé, auf eine Landingpage oder in die interne Arbeit gehört.
- Für das Kartenmenü stehen mehrere Stile zur Verfügung, darunter ein minimaler Stil und ein Referenzstil für Referenzkarten.
- Eigener Kartenstil: Mit dem integrierten Karteneditor im Unternehmensprofil passt du Farben, POI-Icons und das gesamte Kartendesign bis hin zur Schriftart an deine CI an. Änderungen siehst du sofort in einer Live-Vorschau.
- Icons und Farben anpassen
- Dein Objekt-Icon und die Farben deiner POI-Icons legst du im Unternehmensprofil in den Karteneinstellungen fest.
- Die Primärfarbe übernimmt AreaButler in der Regel automatisch aus deinem CRM.
- Anonymisierte Karte und weitere Kartenelemente
- Anonymisierte Karte: Wenn der genaue Standort nicht sichtbar sein soll, nutze die anonymisierte Darstellung. Optional blendest du den Objekt-Marker ganz aus.
- Google-Street-View-Link: Bei Klick auf das Objekt-Icon springen Interessenten direkt zu Google Street View.
- POI-Gruppierung: Beim Herauszoomen werden POIs gebündelt, die Karte bleibt übersichtlich.
- Isochronen: Erreichbarkeiten zu Fuß, mit dem Rad oder mit dem Auto ein- oder ausblenden.
- Tour: Eine geführte Tour leitet Interessenten in der eingebetteten Karte Schritt für Schritt durch die Lage. Touren lassen sich automatisch erzeugen.
- AreaButler legt in onOffice zwei Felder für die Kartenlinks an:
MPAreaButlerUrlWithAddress(mit Adresse) undMPAreaButlerUrlNoAddress(ohne Adresse). So setzt du gezielt die passende Variante ein.
- Grundeinstellungen als Vorlage speichern
- Wechsle im AreaButler oben in den Reiter Karten. Trage bei deiner Karte im Feld Notiz z. B. „Vorlage“ ein und klicke anschließend auf „Als Vorlage festlegen“.
- Ab jetzt werden alle neuen Lagekarten automatisch mit diesen Grundeinstellungen erstellt.
📌 Weiterführende Links:
🗺️ Interaktive Karten in der Praxis
🗺️ Beispiel 1
Einstellungen: Standard-Menü, generisch, 8 POIs pro Kategorie, beim ersten Laden Hinweis auf ausgewählte POIs
🗺️ Beispiel 2
Einstellungen: Standard-Menü, beim ersten Laden eingeklappt, Zielgruppe „Aktive Senioren“, nur POIs für diese Zielgruppe
🗺️ Beispiel 3
Einstellungen: minimales Menü, kreatives Design, einfachere Nutzerführung durch weniger Details
💡 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;
}
}War dieser Artikel hilfreich?