WordPress

Google Maps in WordPress einbetten

Füge eine interaktive Google-Karte ohne Plugin und eigenen API-Schlüssel in eine WordPress-Seite, einen Beitrag, die Seitenleiste oder den Footer ein.

Aktualisiert am 20. Oktober 20266 Min. Lesezeit

Am einfachsten bindest du einen Standort über einen Google-Maps-Iframe in einen individuellen HTML-Block ein. Die Karte übernimmt Zoom und Ansicht aus dem Generator und passt sich mit einem responsiven Container an Smartphones und große Bildschirme an.

Schritt 1

Google-Maps-Einbettungscode erstellen

Erstelle zuerst den Iframe mit dem Standort und der gewünschten Kartenansicht. Dafür brauchst du kein WordPress-Plugin.

  1. Öffne den Google-Maps-Einbettungscode-Generator.
  2. Gib die vollständige Adresse, den Unternehmensnamen oder genaue Koordinaten ein.
  3. Passe den Zoom an und wähle Straßenkarte oder Satellitenansicht.
  4. Wähle Volle Breite (100 %) und lasse die responsive Option aktiv.
  5. Klicke auf Code erstellen und kopiere das HTML.
Ein aussagekräftiger Iframe-Titel wie „Karte unserer Filiale in Berlin“ verbessert die Barrierefreiheit.

Schritt 2

Karte im WordPress-Block-Editor einfügen

Gutenberg ist der Standardeditor von WordPress. Im Block „Individuelles HTML“ bleibt der Iframe als Code erhalten.

  1. Öffne die Seite oder den Beitrag für die Karte.
  2. Klicke auf +, um einen Block hinzuzufügen.
  3. Suche nach Individuelles HTML und wähle den Block.
  4. Füge den kopierten Iframe-Code ein.
  5. Prüfe die Karte über die Vorschau.
  6. Klicke auf Veröffentlichen oder Aktualisieren.
Wenn das Theme die Breite begrenzt, verschiebe den HTML-Block aus schmalen Spalten oder Gruppen mit fester Breite.

Schritt 3

Google Maps im klassischen Editor einbetten

Mit dem Classic Editor oder einer älteren WordPress-Installation fügst du den Iframe in der Codeansicht ein.

  1. Öffne die gewünschte Seite oder den Beitrag.
  2. Wähle im Editor den Tab Text statt Visuell.
  3. Füge den Iframe an der gewünschten Position ein.
  4. Wechsle zurück zur visuellen Ansicht und kontrolliere die Position.
  5. Speichere mit Aktualisieren.
Füge den Code nicht in der visuellen Ansicht ein. WordPress kann das HTML sonst kodieren oder entfernen.

Karte in Seitenleiste oder Footer anzeigen

In Themes mit Widget-Bereichen kannst du die Karte auch in einer Seitenleiste oder im Footer platzieren. Prüfe besonders auf Mobilgeräten, ob genug Platz vorhanden ist.

  1. Öffne Design → Widgets im WordPress-Dashboard.
  2. Wähle die gewünschte Seitenleiste oder den Footer-Bereich.
  3. Füge einen Block oder ein Widget Individuelles HTML hinzu.
  4. Setze den Iframe ein, speichere und kontrolliere die veröffentlichte Seite.

Tipps und Fehlerbehebung

  • Karte wird nicht angezeigt: Prüfe, ob ein Sicherheits-Plugin Iframes entfernt. Erlaube nur die benötigte Google-Maps-Domain.
  • Karte ist zu breit: Erzeuge den Code erneut mit 100 % Breite und responsivem Modus.
  • Falscher Standort: Verwende eine vollständigere Adresse oder exakte Koordinaten.
  • Langsamer Seitenaufbau: Behalte loading="lazy" bei, damit die Karte erst in der Nähe des sichtbaren Bereichs lädt.
  • Block verschwindet: Prüfe die Berechtigung für ungefiltertes HTML; WordPress Multisite kann Iframes einschränken.

Häufige Fragen zu Google Maps und WordPress

Brauche ich ein Plugin?

Nein. Der erzeugte Iframe funktioniert direkt in einem Block für individuelles HTML.

Ist ein Google-Maps-API-Schlüssel erforderlich?

Nicht für diesen Iframe. Eine individuell programmierte JavaScript-Integration kann dagegen einen Schlüssel benötigen.

Funktioniert die Karte auf Smartphones?

Ja. Verwende volle Breite und lasse den responsiven Container aktiviert.

Kann ich mehrere Filialen zeigen?

Ja. Erstelle die Marker in Google My Maps und folge der Anleitung für mehrere Standorte.

Karte für WordPress erstellen

Standort, Größe und Zoom festlegen und in wenigen Sekunden einen responsiven Iframe kopieren.

Generator öffnen