Interaktive Karte im Exposé und auf der Landingpage

Du möchtest die interaktive AreaButler-Karte in deiner Propstack-Landingpage einbinden und die bestehende OpenStreetMap- bzw. Google-Karte nur noch als Fallback nutzen? Dann gehe so vor:

Einrichten der AreaButler Felder

Nutze für die Kartenlinks die automatisch angelegten Felder AreaButler Map mit Adresse und AreaButler Map ohne Adresse. So ist eindeutig, welche Karte mit Adresse und welche anonym ausgespielt wird. Die Landingpage greift genau auf diese Felder zu.

Hinzufügen der AreaButler-Karte in der Landing Page

1. Gehe in Propstack zu Verwaltung / Landing Pages und lade das HTML deiner aktuellen Vorlage herunter.
2. Suche den ersten Code-Abschnitt unten (bisherige Karte) und ersetze ihn durch den zweiten (AreaButler-Karte mit Fallback).
3. Speichere die Vorlage. Danach erscheint die AreaButler-Karte über die volle Breite deiner Landingpage.

Der Zusatz &language={{locale}} sorgt dafür, dass Karte und Menü in der Sprache der Landingpage angezeigt werden. Ist kein AreaButler-Link hinterlegt, zeigt die Landingpage wie bisher die Standardkarte.

<div class="map-container py-4">
  <div class="embed-responsive embed-responsive-21by9 empty">
    {% if show_complete_address and property.lng and property.lat %}
    <div
      id="map-wrap"
      data-lat="{{ property.lat }}"
      data-lng="{{ property.lng }}"
      class="embed-responsive-item"
    ></div>
    {% elsif property.zip_code or property.city %}
    <div
      id="map-wrap"
      data-zipcode="{{ property.zip_code }}"
      data-city="{{ property.city }}"
      class="embed-responsive-item"
    ></div>
    {% endif %}
  </div>
</div>

{% if show_complete_address and
property.formatted.areabutler_link_with_address %}
<iframe
  src="{{property.formatted.areabutler_link_with_address}}&language={{locale}}"
  id="areabutler-map"
  width="100%"
  height="600px"
  frameborder="0"
></iframe>
{% elsif !show_complete_address and
property.formatted.areabutler_link_without_address %}
<iframe
  src="{{property.formatted.areabutler_link_without_address}}&language={{locale}}"
  id="areabutler-map"
  width="100%"
  height="600px"
  frameborder="0"
></iframe>
{% else %}
<div class="map-container py-4">
  <div class="embed-responsive embed-responsive-21by9 empty">
    {% if show_complete_address and property.lng and property.lat %}
    <div
      id="map-wrap"
      data-lat="{{ property.lat }}"
      data-lng="{{ property.lng }}"
      class="embed-responsive-item"
    ></div>
    {% elsif property.zip_code or property.city %}
    <div
      id="map-wrap"
      data-zipcode="{{ property.zip_code }}"
      data-city="{{ property.city }}"
      class="embed-responsive-item"
    ></div>
    {% endif %}
  </div>
</div>
{% endif %}

💬 Fragen? Lukas und unser Team erreichst du über die Kontaktseite

← zurück

Mit wenigen Schritten bindest du die interaktive AreaButler-Karte in deine Web-Exposé-Vorlage in onOffice ein. Wenn du die AreaButler-App über den onOffice-Marketplace freigeschaltet hast, speichert AreaButler die Kartenlinks automatisch in zwei Feldern der Immobilie: MPAreaButlerUrlWithAddress (Karte mit Adresse) und MPAreaButlerUrlNoAddress (Karte ohne Adresse). Die Platzhalter im Code unten greifen auf diese Felder zu.

Anleitung

1. Öffne in onOffice Bearbeiten → Web-Exposés.
2. Öffne die Vorlage deines Web-Exposés oder erstelle eine neue.
3. Klicke auf Block hinzufügen → Text.
4. Passe den Titel an, z. B. „Interaktive Karte entdecken“.
5. Kopiere eines der beiden Code-Snippets und füge es in das Textfeld ein.

   Karte mit Adresse:

   html

   <iframe src="_MPAreaButlerUrlWithAddress" width="100%" height="700"
   	name="AreaButlerKarte" title="Neue Wohnlage entdecken"
   	style="overflow-y: scroll;"></iframe>

   Karte ohne Adresse:

   html

   <iframe src="_MPAreaButlerUrlNoAddress" width="100%" height="700"
   	name="AreaButlerKarte" title="Neue Wohnlage entdecken"
   	style="overflow-y: scroll;"></iframe>

6. Speichere die Vorlage und veröffentliche die Änderungen.

Tipp: Wenn die Karte im Web-Exposé leer bleibt, prüfe, ob die beiden AreaButler-Felder in der Immobilie gefüllt sind. Die Karte entsteht z. B. über das Marketplace-Symbol in onOffice mit „Interaktive Karte erstellen“ oder „Karte und Texte erstellen“.

💬 Fragen? Lukas und unser Team erreichst du über die Kontaktseite