onOffice

Interaktive Karten

Interaktive Lagekarten mit POIs und Erreichbarkeiten erstellen, gestalten und als Vorlage speichern (onOffice).

Zuletzt aktualisiert: 8. Juli 2025

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

🗺️ 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

🔗 Link zur Karte Vollbild

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

🔗 Link zur Karte Vollbild

https://app.areabutler.de/embed?token=08c243fe333b195e2f5784c51a70392292855ad2676c1a44930b166fa7e859e7dd8ccd212d70b4679dffbe3079a73a4f89413dd53b61638b7f842f2b&isAddressShown=true

🗺️ Beispiel 3

Settings: Minimal-Menu, Kreatives Design, einfacherer Nutzerführung durch weniger Details

🔗 Link zur Karte Vollbild

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;
	}
}