So betten Sie eine Google Map mit dem Odoo-Embed-Code-Modul ein

Um eine Google Map mit dem integrierten Embed-Code-Modul in Odoo einzubetten, rufen Sie zunächst den iframe-Snippet von Google Maps ab, fügen Sie dann den Block „Embed Code“ im Website-Editor zu Ihrer Seite hinzu und fügen Sie den Code ein. Die Karte wird auf der Live-Website ohne benutzerdefinierte Entwicklung gerendert.

So funktioniert der Block „Embed Code“

Der Block „Embed Code“ ist eine Kernfunktion von Odoo Website. Er speichert jedes HTML-Snippet, das Sie darin einfügen. Wenn ein Besucher die Seite lädt, rendert Odoo dieses Snippet direkt im Seitenlayout. Es findet keine serverseitige Verarbeitung statt. Der Block dient als Container für rohes HTML, einschließlich iframes, Skripten oder benutzerdefinierten Styles.

Dieser Block eignet sich perfekt für Integrationen von Drittanbietern wie Google Maps, YouTube-Videos oder Buchungs-Widgets. Sie müssen weder Vorlagendateien bearbeiten noch Python-Code schreiben. Der Block respektiert das responsive Raster der Seite. Sie können ihn in Spalten, Abschnitte oder jeden beliebigen Container platzieren.

Odoo bereinigt das Snippet nicht. Sie können also jedes gültige HTML einfügen. Seien Sie jedoch vorsichtig. Schädlicher Code könnte Ihre Website beschädigen. Fügen Sie immer Code aus vertrauenswürdigen Quellen wie Google Maps ein.

Voraussetzungen

• Eine Odoo-Instanz mit installierter Website-App (Standard in Odoo Online, Odoo.sh und On-Premise).
• Editorzugriff auf die Seite, auf der die Karte erscheinen soll.
• Ein Google-Maps-Einbettungslink – für den einfachen iframe „Karte einbetten“ ist kein API-Schlüssel erforderlich.

Schritt-für-Schritt-Anleitung (mit Details zum Quellpaket)

1. Rufen Sie den Google-Maps-Einbettungscode ab. Öffnen Sie Google Maps in einem Browser, suchen Sie nach der Adresse oder dem Ort, klicken Sie auf Teilen → Karte einbetten, wählen Sie eine Größe (klein, mittel, groß oder benutzerdefiniert) und klicken Sie dann auf HTML kopieren. Die Zwischenablage enthält jetzt ein <iframe>-Tag.
2. Melden Sie sich bei Ihrem Odoo-Konto an und rufen Sie das Modul „Website“ auf. Klicken Sie im Dashboard auf Website. Navigieren Sie dann zu der Seite, die Sie bearbeiten möchten, und klicken Sie auf die Schaltfläche Bearbeiten, um das Bearbeitungsfenster zu öffnen.
3. Finden Sie das Modul „Embed Code“. Scrollen Sie im Bearbeitungsfenster durch das Fenster Blöcke, bis Sie zum Abschnitt Dynamic Content gelangen. Der Block ist mit Embed Code beschriftet.
4. Ziehen Sie den Block auf die Seite. Legen Sie ihn dort ab, wo die Karte erscheinen soll – in einer Spalte, einem Abschnitt oder direkt im Raster.
5. Sobald das Modul platziert ist, klicken Sie auf die Schaltfläche „Bearbeiten“ im rechten Bereich, um den Code einzugeben. Ein Pop-up-Fenster erscheint.
6. Fügen Sie im erscheinenden Pop-up-Fenster den von Google Maps bereitgestellten Codeschnipsel in den vorgesehenen Bereich ein und klicken Sie dann auf „Speichern“, um die Änderungen anzuwenden. Der Block enthält nun den iframe.
7. Optional: Sichtbarkeit anpassen. Öffnen Sie weiterhin im rechten Bereich den Abschnitt Sichtbarkeit. Sie können Auf Desktop ausblenden oder Auf Mobilgerät ausblenden aktivieren, wenn die Karte nur auf bestimmten Geräten angezeigt werden soll. Klicken Sie erneut auf Speichern.
8. Veröffentlichen. Verlassen Sie den Editor und klicken Sie auf Veröffentlichen (oder Speichern, wenn die Seite bereits live ist). Rufen Sie die Frontend-URL auf, um zu bestätigen, dass die Karte geladen wird.

So erhalten Sie einen sauberen Google-Maps-iframe

Der Dialog „Karte einbetten“ erzeugt einen iframe mit fester Breite und Höhe. Ersetzen Sie für responsive Layouts die Pixelmaße durch width="100%" und eine angemessene Höhe (z. B. height="400"). Beispiel:

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3..."
  width="100%"
  height="400"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"></iframe>

Das Hinzufügen von loading="lazy" verzögert die Karte, bis der Besucher in ihre Nähe scrollt, und verbessert die Page-Speed-Werte.

Häufige Probleme und schnelle Lösungen

• Die Karte zeigt „Diese Seite kann Google Maps nicht richtig laden.“ Die iframe-src ist möglicherweise abgeschnitten. Kopieren Sie den vollständigen Einbettungscode erneut aus Google Maps; die URL ist lang und lässt sich leicht abschneiden.
• Die Karte ist zu klein oder läuft auf Mobilgeräten über. Stellen Sie sicher, dass der iframe width="100%" hat und die übergeordnete Spalte/der Abschnitt keine feste Pixelbreite aufweist, die ein Überlaufen erzwingt.
• Block wird in Dynamic Content nicht gefunden. In Odoo 17+ heißt der Block weiterhin Embed Code. Wenn Sie ein benutzerdefiniertes Theme verwenden, das Kernblöcke ausblendet, prüfen Sie die Blockliste des Themes oder wechseln Sie vorübergehend zum Standardtheme, um dies zu überprüfen.
• HTTPS-Warnung wegen gemischter Inhalte. Google-Maps-Einbettungs-URLs sind HTTPS. Wenn Ihre Odoo-Website lokal über HTTP läuft (z. B. localhost), blockiert der Browser möglicherweise den iframe. Verwenden Sie zum Testen eine gültige Domain mit SSL.

Praktische Szenarien für die Verwendung des Blocks „Embed Code“

Kontaktseite – Zeigen Sie Ihren Bürostandort. Platzieren Sie die Karte neben dem Kontaktformular. Besucher können genau sehen, wo Sie sich befinden.

Veranstaltungsseite – Betten Sie eine Karte des Veranstaltungsorts ein. Teilnehmer können eine Wegbeschreibung erhalten, ohne Ihre Website zu verlassen.

Filialfinder – Wenn Sie einen Standort haben, funktioniert eine statische Einbettung einwandfrei. Für mehrere Standorte benötigen Sie eine benutzerdefinierte Lösung.

Immobilienanzeige – Platzieren Sie eine Karte der Immobilie. Verwenden Sie Street View, falls verfügbar.

Touristeninformationsseite – Zeigen Sie Sehenswürdigkeiten. Verwenden Sie mehrere Einbettungsblöcke für verschiedene Orte.

Einschränkungen und wann ein benutzerdefiniertes Modul verwendet werden sollte

• Keine dynamischen Marker oder Routen. Der statische iframe zeigt einen Standort. Für mehrere Marker, Wegbeschreibungen oder benutzerdefiniertes Styling benötigen Sie die Maps JavaScript API und ein benutzerdefiniertes Modul.
• Keine serverseitige Steuerung. Der iframe wird vollständig von Google geladen; Sie können Kartenebenen nicht filtern oder den Zoom nicht von Odoo aus einschränken.
• Cookie-Einwilligung. Der iframe setzt Google-Cookies. Wenn Sie ein strenges DSGVO-Banner verwenden, wird die Karte möglicherweise erst geladen, wenn der Besucher Marketing-/Analyse-Cookies akzeptiert.
• Ratenlimits. Der kostenlose Einbettungs-Endpunkt ist großzügig, aber nicht unbegrenzt. Websites mit hohem Traffic (Millionen Kartenaufrufe pro Monat) sollten zur Maps JavaScript API mit einem Abrechnungskonto wechseln.

Bedarf	Empfohlener Ansatz	Aufwand
Einzelner statischer Standort, kein Code	Block „Embed Code“ + Google-Maps-iframe (dieser Artikel)	Gering
Mehrere Standorte, filterbare Liste	Benutzerdefiniertes Odoo-Modul mit Maps JavaScript API	Mittel–Hoch
Schaltfläche für Wegbeschreibung, benutzerdefinierte Pins, Clustering	Maps JavaScript API + benutzerdefiniertes Widget	Hoch
Filialfinder mit Geolokalisierung	Dediziertes Filialfinder-Modul (OCA/web_widget_google_maps oder Drittanbieter)	Mittel

Wichtige Fakten

Element	Detail
Name des Odoo-Blocks	Embed Code
Position des Blocks	Fenster „Blöcke“ → Dynamic Content
Konfigurationsschritt	Im rechten Bereich auf Bearbeiten klicken → iframe einfügen → Speichern
Sichtbarkeitsoptionen	Auf Desktop ausblenden, Auf Mobilgerät ausblenden
Google-Maps-Quelle	Teilen → Karte einbetten → HTML kopieren
API-Schlüssel erforderlich	Nein (für einfachen Einbettungs-iframe)
Responsive-Tipp	iframe width="100%" und feste Höhe einstellen

Häufig gestellte Fragen

Benötige ich für die einfache Einbettung einen Google-Cloud-API-Schlüssel?

Nein. Der iframe „Karte einbetten“ funktioniert ohne API-Schlüssel. Schlüssel sind nur für die Maps JavaScript API, die Geocoding API oder die Places API erforderlich.

Kann ich anstelle einer Karte ein Street-View-Panorama einbetten?

Ja. Öffnen Sie in Google Maps Street View, klicken Sie auf Teilen → Karte einbetten und kopieren Sie diesen iframe. Derselbe Block „Embed Code“ verarbeitet ihn.

Warum erscheint die Karte nicht in der Vorschau des Backend-Editors?

Der Odoo-Editor bereinigt iframes in der Live-Vorschau manchmal. Veröffentlichen Sie die Seite und rufen Sie die Frontend-URL auf; dort wird die Karte gerendert.

Wie zentriere ich die Karte auf eine Koordinate statt auf eine Adresse?

Klicken Sie in Google Maps mit der rechten Maustaste auf die genaue Stelle → „Was ist hier?“ → kopieren Sie den Breiten-/Längengrad aus der unteren Infokarte → suchen Sie nach diesen Koordinaten → Teilen → Karte einbetten.

Kann ich die Karte auf bestimmte Zoomstufen beschränken?

Nicht mit dem Einbettungs-iframe. Die Maps JavaScript API unterstützt die Optionen minZoom und maxZoom, die ein benutzerdefiniertes Modul erfordern.

Bleibt der Einbettungscode bei Odoo-Upgrades erhalten?

Ja. Der Block „Embed Code“ ist eine Kernfunktion von Website. Ihr eingefügter iframe wird im Seiteninhalt (ir.ui.view) gespeichert und bleibt bei Versionsupgrades erhalten.

Was ist, wenn ich die Karte in einer Produktseite oder einer Kontaktformularvorlage benötige?

Bearbeiten Sie die relevante QWeb-Vorlage (z. B. website_sale.product oder website.contact) im Entwicklermodus, fügen Sie ein <iframe> direkt in das XML ein oder erstellen Sie ein berechnetes Feld, das das iframe-HTML zurückgibt, und rendern Sie es mit t-out="0". Das geht über den No-Code-Block „Embed Code“ hinaus.

Kann ich mehrere Karten auf einer Seite einbetten?

Ja. Ziehen Sie mehrere Blöcke „Embed Code“ auf die Seite. Jeder Block enthält einen iframe. Stellen Sie sicher, dass die iframe-src eindeutige Orts-IDs enthält, um Duplikate zu vermeiden.

Funktioniert die Karte auf Mobilgeräten?

Ja. Der iframe ist responsiv, wenn Sie width="100%" festlegen. Google Maps passt die Ansicht automatisch für kleine Bildschirme an.

Wie beschleunige ich das Laden der Karte?

Fügen Sie dem iframe loading="lazy" hinzu. Legen Sie außerdem ein Platzhalterbild mit niedriger Auflösung fest, bis die Karte geladen ist. Der Einbettungscode unterstützt jedoch keine benutzerdefinierten Platzhalter.

Weiterführende Lektüre und Vergleichsquellen

Diese externen Quellen bieten zusätzlichen Kontext zur Bewertung des Themas. Ihre Aufnahme stellt keine Billigung dar.

• Wie bettet man Google Maps über ein neues Widget in ein Feld in Odoo ein?
• So fügen Sie Google Maps zu Odoo hinzu
• Google Map in Ihr benutzerdefiniertes Odoo-Modul einbetten

Weiterführende Lektüre und Vergleichsquellen

Diese externen Quellen bieten zusätzlichen Kontext zur Bewertung des Themas. Ihre Aufnahme stellt keine Billigung dar.

• Wie bettet man Google Maps über ein neues Widget in ein Feld in Odoo ein?
• So fügen Sie Google Maps zu Odoo hinzu
• Google Map in Ihr benutzerdefiniertes Odoo-Modul einbetten

Mehr erfahren

Besuchen Sie die Website für weitere Informationen.