Propstack

Interaktive Karten

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

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

Ziel dieses Schritts: 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.

  1. AreaButler öffnen und Objekt auswählen: Um mit der Konfiguration zu beginnen, müssen Sie zunächst ein Objekt auswählen.
    • Öffnen Sie Propstack und navigieren Sie zur Objektübersicht.
    • Wählen Sie ein Objekt aus, das als Vorlage für künftig generierte Lagekarten dienen soll.
    • Öffnen Sie das Objekt und navigieren Sie zu den Erweiterungen, um den AreaButler zu starten.
    • Nun gelangen Sie auf die Startseite des AreaButler, von der aus Sie mit einem Klick eine interaktive Lagekarte erstellen können.
  2. Lagekarte erstellen: Sobald der AreaButler geöffnet ist, können Sie eine neue Lagekarte anlegen.
    • Lassen Sie die Zielgruppe vorerst unberücksichtigt, um zunächst eine generische Karte zu erhalten.
    • Klicken Sie hierfür auf „Karte erstellen“, um eine neue Lagekarte zu generieren.
    • Nachdem die Karte geladen wurde, öffnet sie sich automatisch und Sie können die Einstellungen anpassen.
  3. POI-Detailfilter anpassen: Eine gut strukturierte Lagekarte zeigt nur die wirklich relevanten Points of Interest. Wie viele POIs angezeigt werden, können Sie über den POI-Detailfilter anpassen.
    • Klicken Sie hierfür oben rechts auf den Reiter “Editor” und klappen Sie dann den POI-Detail-Filter aus.
    • Standardmäßig werden 10 POIs pro Kategorie angezeigt (z. B. 10 Restaurants, 10 Schulen, 10 Supermärkte).
    • Falls gewünscht, reduzieren Sie die Anzahl, um die Karte übersichtlicher zu gestalten (z. B. nur 5 POIs pro Kategorie).
    • Speichern Sie nach jeder Anpassung, um die Änderungen zu übernehmen.
    • Sind Sie mit Ihren Einstellungen zufrieden, können Sie den Detail-Filter wieder schließen, um zum nächsten Schritt überzugehen.
  4. Kartenstil festlegen: Die Darstellung der Karte kann an Ihre Anforderungen angepasst werden. Wählen Sie den gewünschten Kartenstil aus, um die visuelle Darstellung zu optimieren.
    • Klappen Sie hierfür den Reiter “Konfiguration” aus.
    • Wählen Sie zwischen den kostenfrei verfügbaren Stilen: Classic (Standard), Basic oder Satellit.
    • Die Satelliten-Ansicht kann später vom Kunden selbst eingestellt werden, daher ist die Wahl zwischen Classic oder Basic zu Beginn entscheidend.
    • Falls Sie einen eigenen Kartenstil wünschen, können Sie uns jederzeit kontaktieren, um einen individuellen Stil zu erstellen zu lassen.
  5. Menüstil konfigurieren: Nun, da der Kartenstil festgelegt wurde, können wir den Menüstil konfigurieren, um eine benutzerfreundliche Navigation zu gewährleisten. Passen Sie den Menüstil an, um eine benutzerfreundliche Darstellung der Points of Interest zu gewährleisten.
    • Öffnen Sie die Kundenansicht, indem Sie oben auf den Reiter Karte klicken und unter Digitale Medien den öffentlichen Link kopieren.
    • Öffnen Sie den kopierten Link in einem separaten Tab Ihres Browsers, um die Kundenansicht der Lagekarte zu überprüfen.
    • Wählen Sie zwischen Standard (ausklappbares Menü mit detaillierten Informationen):
    • oder wählen Sie Minimal (reduziertes Menü mit vereinfachter Benutzeroberfläche, ohne integrierte Details).
    • Speichern Sie Ihre bevorzugte Auswahl und prüfen Sie bei Bedarf noch einmal die Kundenansicht, indem Sie den Tab aktualisieren.
  6. Anonymisierte Karte einrichten:

    Falls Sie eine anonymisierte Karte wünschen, die den genauen Standort Ihres Objekts nicht preisgibt, können Sie diese Option separat aktivieren. Dies ist besonders dann sinnvoll, wenn Sie sensible Daten schützen oder den Standort Ihres Objekts nicht sofort offenbaren möchten.

    • Map-Icon für anonymisierte Karten deaktivieren: Deaktivieren Sie diese Option, um das Karten-Icon zu verbergen und eine anonymisierte Darstellung des Objekts zu verwenden. Der Marker des Objekts wird in diesem Fall entfernt, sodass die genaue Position nicht sichtbar ist.
  7. Icon-Anzeige und Map-Elemente einstellen:

    Nachdem Sie die anonymisierte Karte konfiguriert haben, können wir die weiteren Optionen für POI-Gruppierung, Google Street View und Isochronen festlegen.

    • Google Street View-Link aktivieren, damit Kunden bei Klick auf das Karten-Icon direkt zur Google Street View springen können.
    • POI-Gruppierung aktivieren, um die Anzeige der POIs beim Herauszoomen zu bündeln und die Karte damit übersichtlicher zu gestalten.
    • Isochronen-Anzeige ein-/ausblenden, um die Erreichbarkeit des Objekts in einem bestimmten Zeitrahmen darstellen, bzw. auszublenden.
  8. Kartenmenü und Referenzkarte:

    Sie können entscheiden, ob das Kartenmenü standardmäßig eingeklappt sein soll, oder nicht. Dies sorgt für eine kompaktere Ansicht, wenn die Karte zum ersten Mal geladen wird.

    • Kartenmenü standardmäßig einklappen, wenn gewünscht.
    • Hierfür den Haken bei “Kartenmenü im Iframe minimieren” setzen.
    • Den Punkt Referenzkarte wählen Sie nur dann, wenn Sie eine solche für Ihr Unternehmen benötigen (Details zur Erstellung einer Referenzkarte finden Sie in einer separaten Anleitung).
  9. Karten-Icon anpassen:

    Nun, dass die grundlegenden Optionen festgelegt wurden, können Sie das Karten-Icon hochladen und das Erscheinungsbild der Karte weiter verfeinern.

    • Klicken Sie auf das Feld zum Hochladen des Map Icons.
    • Verwenden Sie die Schieberegler, um die Größe des Icons sowie die Größe der POI-Symbole anzupassen.
    • Speichern Sie die Änderungen, um alle vorgenommenen Einstellungen abzuspeichern.

    Nachdem nun alle Einstellungen erfolgreich konfiguriert wurden, können Sie jetzt die Vorlage für zukünftig erstellte Karten zu setzen.

  10. Vorlage setzen:

    Zum Abschluss setzen Sie die aktuelle Konfiguration als Vorlage, die für alle zukünftigen Karten verwendet werden soll.

    • Öffnen Sie das Kartenmenü und klicken Sie auf die Adresszeile, für die Sie die Lagekarte soeben erstellt & konfiguriert haben.
    • Beschriften Sie das Objekt über das Notizfeld als Vorlage.
    • Klicken Sie auf „Vorlage setzen“, damit diese Einstellungen für alle zukünftigen Karten als Standard gelten.

Damit haben Sie alle Grundeinstellungen für Ihre Lagekarte vorgenommen 🥳

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:

Zum Hilfe-Center

🔹 Support-Termin vereinbaren:

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

🔗 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.

css
@media screen and (max-width: 800px) {
	iframe.areabutler {
		margin: 0px -20px;
		width: 100%;
		width: -webkit-fill-available;
		width: -moz-available;
	}
}
CSS um Rand in Mobilansicht zu überdecken


🌐 AreaButler Website

🇩🇪 Präsentation ansehen

✅ Changelog

Fragen, Ideen & Feedback ?


💬 WhatsApp Chat starten

☎️ Anrufen

💡E-Mail schreiben

⁉️ Termin für Fragen oder Support buchen

War dieser Artikel hilfreich?

Frage noch offen?

Unser Support-Team hilft dir gern persönlich weiter.

Support kontaktieren