Wie richte ich die iFrame Karte richtig für meine Website ein?

← zurück

Jede interaktive AreaButler-Karte hat einen Link, den du per iframe auf deiner Website einbinden kannst – mit Adresse oder anonym ohne Adresse. Wo die Links liegen, hängt von deinem CRM ab.

Propstack

In Propstack speichert AreaButler die Kartenlinks in den automatisch angelegten Feldern AreaButler Map mit Adresse und AreaButler Map ohne Adresse. Wie du die Karte in deine Propstack-Landingpage einbaust, zeigt der Artikel Interaktive Karte in der Landing Page einbetten.

onOffice: Übertragung der Links über OpenImmo (Frymo, WP-ImmoMakler etc.)

Zuerst schaltest du die AreaButler-App über den onOffice-Marketplace frei. Dabei werden der Immobilie die zwei Felder MPAreaButlerUrlWithAddress und MPAreaButlerUrlNoAddress hinzugefügt. Darin speichert AreaButler standardmäßig die URL für das iframe.

onOffice überträgt diese Felder als Custom-Felder per OpenImmo an deine Website. So bettest du die Karte je nach Anwendungsfall mit oder ohne Adresse ein.

⚠️ Kommen die Custom-Felder nicht über OpenImmo an, prüfe zuerst, ob die Felder in der Immobilie gefüllt sind. Sind sie leer, melde dich über die Kontaktseite.

iframe-Einstellungen

• Höhe auf dem Desktop: etwa 900 px bzw. 70 % der Fensterhöhe (siehe Beispiel).
• Höhe auf dem Smartphone: 600 px bzw. 90 % der Fensterhöhe.
• Volle Breite auf dem Smartphone: Binde die Karte mobil über die volle Breite ein, sonst werden Menü und Bedienelemente nicht richtig dargestellt. Oft geben die umgebenden Elemente dem iframe einen Rand mit, deshalb empfehlen wir ein negatives margin (siehe Beispiel).
• Sprache: Karte und Menü lassen sich in verschiedenen Sprachen anzeigen. Das steuerst du mit dem Parameter language und einem zweistelligen Sprachcode nach ISO 639-1, z. B. &language=en (siehe Beispiel).
• Tour: Die geführte Tour läuft direkt in der eingebetteten Karte.

iframe.areabutler {
	border: none;
	height: 70vh;
	width: 100%;
}

@media screen and (max-width: 800px) {
	iframe.areabutler {
		margin: 0px -20px; /* nur bei seitlichen Rändern */
		height: 90vh;
		width: 100vw;
		width: -webkit-fill-available;
		width: -moz-available;
	}
}

<!-- Karte mit Adresse -->
<iframe class="areabutler"
  src="{{MPAreaButlerUrlWithAddress}}"
  title="AreaButler Map"></iframe>

<!-- Karte mit Adresse und Übersetzung -->
<iframe class="areabutler"
  src="{{MPAreaButlerUrlWithAddress}}&language={{locale}}"
  title="AreaButler Map"></iframe>

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