Interaktive Karte in der Landing Page einbetten
So bettest du eine interaktive AreaButler-Karte direkt in deine Landingpage ein.
Zuletzt aktualisiert: 1. April 2026
Sie möchten die AreaButler Karte in Ihrer Propstack Landing Page einbinden und die bestehende Openstreetmap / Google Map nur als Fallback verwenden? Dann gehen Sie bitte wie folgt vor.
Einrichten der AreaButler Felder
Wir empfehlen, die Verwendung unserer automatisch erzeugten Felder AreaButler Map mit Adresse und AreaButler Map ohne Adresse für die Speicherung unserer Kartenlinks. Dadurch kann sichergestellt werden, dass die Karten eindeutig bestimmbar – anonym oder mit Adresse – verwendet werden. Weiterhin wird auf diese Information in der Landing Page zugegriffen werden.
Hinzufügen der AreaButler-Karte in der Landing Page
Navigieren Sie zu Verwaltung / Landing Pages und laden Sie das HTML der aktuellen Vorlage herunter. Suchen Sie nach dem folgenden Code-Abschnitt und ersetzen diesen durch den Rechten. Nach dem Speichern, sollten Sie die AreaButler-Karte in Ihrer Landing Page über die volle Breite angezeigt bekommen.
<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.custom.area_butler_map_with_address %}
<iframe
src="{{property.formatted.custom.area_butler_map_with_address}}&language={{locale}}"
id="areabutler-map"
width="100%"
height="600px"
frameborder="0"
></iframe>
{% elsif !show_complete_address and
property.formatted.custom.area_butler_map_without_address %}
<iframe
src="{{property.formatted.custom.area_butler_map_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 %}War dieser Artikel hilfreich?