Eine Karte auf der Kontaktseite spart deinen Besuchern die Frage „Wo genau seid ihr?“. In Divi übernimmt das ein eigenes Modul, das eine Google-Karte mit beliebig vielen Pins einbettet. Das Modul heißt in Divi 5 mit deutscher Oberfläche schlicht „Karte“ (früher „Map“) und sitzt wie jedes andere Modul in einer Spalte.
Ein Wort vorweg, weil es der häufigste Stolperstein ist: Die Karte funktioniert nur mit einem Google-API-Schlüssel, und den gibt es nur mit einem Google-Konto samt hinterlegter Zahlungsmethode. In Deutschland kommt außerdem der Datenschutz dazu, denn Google-Karten dürfen erst nach Einwilligung laden. Beides erkläre ich unten. Alle Bedienschritte stammen aus einem echten Divi 5.13.1 (deutsche Oberfläche), Stand Oktober 2026.
Was ich nicht gezeigt habe: Ich habe bewusst keinen echten Schlüssel eingetragen. Die Screenshots zeigen deshalb die Karte so, wie sie ohne Schlüssel aussieht, und die Felder, in die er gehört. Die Adresssuche habe ich nicht ausprobiert, ihr Ergebnis beschreibe ich nur nach Divis eigener Anleitung.
Was du vorher brauchst: den Google-API-Schlüssel
Laut Elegant Themes brauchst du für das Karte-Modul ein Google-Konto, ein Projekt mit Abrechnungskonto und die aktivierte Geocoding-API. Google beschreibt den Weg in der Dokumentation zur Maps Platform: In der Google Cloud Console legst du ein Projekt an, aktivierst die Abrechnung, schaltest die benötigten Schnittstellen frei und erzeugst einen API-Schlüssel. Für die Kartenanzeige ist das die „Maps JavaScript API“, für das Suchen von Adressen die Geocoding-API. Was die Nutzung kostet und wie viel Google gratis erlaubt, steht auf der Preisseite von Google und ändert sich, deshalb nenne ich hier keine Zahlen.
Zwei Hinweise aus Googles Dokumentation, die du ernst nehmen solltest:
- Schlüssel einschränken. Ein Schlüssel, der im Seitenquelltext steht, ist für jeden sichtbar. Beschränke ihn in der Cloud Console auf deine Domain und auf die benötigten Schnittstellen, sonst kann ihn ein Fremder auf deine Rechnung nutzen.
- Demo-Schlüssel nicht fürs Livegeschäft. Google bietet einen „Maps Demo Key“ ohne Zahlungsdaten an, aber ausdrücklich nur zum Ausprobieren, nicht für eine echte Website.
Wo der Schlüssel in Divi hingehört
Divi kennt zwei Stellen. Die eine ist das Modul selbst: Im Reiter Inhalt gibt es die Gruppe „Karte“ mit dem Feld „Google API-Schlüssel“ und einem Knopf „API-Schlüssel Hinzufügen“. Die andere liegt global in Divi → Theme-Optionen im Reiter „Allgemein“, ein Stück weiter unten: Feld „Google API-Schlüssel“. Direkt darunter sitzt der Schalter „Google Maps-Skript Einbinden“, der bei mir standardmäßig an war.
In den Theme-Optionen steht das Schlüsselfeld für die ganze Website.Ich habe in beide Felder nichts eingetragen und deshalb nicht geprüft, welche Stelle Vorrang hat. Trag den Schlüssel am besten nur an einer Stelle ein, dann gibt es keine Verwirrung.
Karte-Modul einfügen
Öffne die Seite im Visual Builder, klick in der gewünschten Spalte auf das Plus und tippe in das Suchfeld „Karte“. Das Suchfeld heißt „Search for a module“ und ist noch englisch, die Treffer sind deutsch. Klick auf „Karte“, und die Einstellungen öffnen sich sofort.
Ohne Schlüssel zeigt der Canvas eine graue Google-Karte mit der Meldung „Google Maps kann auf dieser Seite nicht richtig geladen werden.“ samt dem Knopf „Ok“ unter „Bist du Inhaber dieser Website?“. Wenn du das siehst, ist nicht Divi kaputt: Es fehlt der Schlüssel oder er ist noch nicht freigeschaltet.
So sieht das Modul ohne gültigen Schlüssel aus.Adresse suchen und Mittelpunkt setzen
In derselben Gruppe „Karte“ findest du das Feld „Mittelpunkt-Adresse Der Karte“ mit dem Knopf „Suchen“ und einer kleinen Vorschau. Hier tippst du die Anschrift ein und klickst auf „Suchen“. Dafür fragt Divi bei Google nach den Koordinaten, also braucht auch diese Funktion den Schlüssel. Bei mir blieb die Karte ohne Schlüssel unverändert.
Die Gruppe „Karte“ im Reiter „Inhalt“Pins hinzufügen
Eine Stecknadel auf deiner Adresse legst du in der Gruppe „Elemente“ an. Der Eintrag heißt „Add Karten-Pin“ und ist ein Beispiel für die gemischtsprachige Oberfläche. Ein Klick öffnet das Element „Karten-Pin“ mit diesen Gruppen:
- „Text“: ein „Titel“ und ein „Fließtext“. Das ist der Inhalt der Sprechblase, die beim Klick auf den Pin aufgeht, etwa „Unser Studio“ und die Öffnungszeiten.
- „Karte“: das Feld „Stecknadel-Adresse Auf Karte“ mit „Suchen“, wieder mit dem Schlüssel als Voraussetzung.
Titel und Text der Sprechblase eines PinsMit „Add Karten-Pin“ legst du weitere Pins an, zum Beispiel für einen zweiten Standort. Ein Pin pro Adresse reicht, die Karte zeigt sie alle.
Verhalten und Aussehen einstellen
Im Reiter Design liegen zwei Gruppen, die bei Karten wichtig sind. Unter „Einstellungen“ stehen zwei Schalter, die beide standardmäßig an sind: „Mausrad-Zoom“ und „Ziehbar Auf Dem Handy“. Ist der Mausrad-Zoom an, reagiert die Karte aufs Mausrad, und wer nur die Seite herunterscrollen will, kann versehentlich in die Karte zoomen. Ist „Ziehbar Auf Dem Handy“ an, kann man auf dem Smartphone die Karte mit dem Finger verschieben, und beim Scrollen kann der Finger an der Karte hängen bleiben. Auf einer langen Kontaktseite würde ich beides ausschalten, zumindest probierst du es besser am Handy aus.
Beide Schalter sind ab Werk an.Die Gruppe „Karte“ im Reiter Design enthält den Schalter „Graustufenfilter Verwenden“ (standardmäßig aus). Er färbt die Karte grau, was auf Seiten mit ruhigem Design gut aussieht. Größe, Abstände, Rand und Schatten stellst du wie bei jedem Modul unter „Größe Einstellen“, „Zwischenraum“, „Rand“ und „Box Schatten“ ein.
Der Graustufenfilter sitzt im Reiter „Design“.Datenschutz: Karte nur mit Einwilligung
Sobald die Karte lädt, nimmt dein Besucher Kontakt zu Google auf, und Google setzt Skripte ein. Nach § 25 TDDDG (Telekommunikation-Digitale-Dienste-Datenschutz-Gesetz) brauchst du für solche Zugriffe auf das Endgerät eine Einwilligung, es sei denn, sie sind für den Dienst unbedingt erforderlich. Eine Karte, die nur die Anfahrt zeigt, gilt dafür in der Regel nicht als unbedingt erforderlich. Die übliche Lösung ist ein Cookie-Banner (Consent-Tool), das Google Maps blockiert, bis jemand zustimmt, und bis dahin einen Platzhalter zeigt. Alternativ verlinkst du nur auf Google Maps oder nutzt ein Bild deines Standorts mit Link. Wie du dein Banner einrichtest, hängt vom Tool ab. Das ist keine Rechtsberatung. Wenn du unsicher bist, frag deine Datenschutzberatung.
Noch kein Divi? Was die Lizenzen kosten und welche sich für dich lohnt, steht unter Divi Preise. Den größten Rabatt gibt es meist Ende November, alles dazu unter Divi Black Friday. Neu bei Divi 5? Hier steht, was sich geändert hat.
Häufige Fragen
Warum zeigt die Karte „Google Maps kann auf dieser Seite nicht richtig geladen werden“?
Meist fehlt der Schlüssel, er ist falsch kopiert oder die nötige Schnittstelle ist im Google-Projekt nicht aktiviert. Prüf in der Cloud Console, ob die Abrechnung aktiv ist und die Maps JavaScript API freigeschaltet wurde.
Geht eine Karte auch ohne Google-Konto?
Das Karte-Modul nicht, es ist ausdrücklich eine Google-Karte. Für eine Lösung ohne Schlüssel brauchst du ein anderes Kartensystem oder ein Plugin, das Karten anderer Anbieter einbettet. Das ist dann kein Divi-Modul mehr.
Wie viele Pins sind möglich?
Über „Add Karten-Pin“ legst du so viele an, wie du brauchst. Eine feste Obergrenze nennt Divi in der Oberfläche nicht.
Mehr zum Theme und zu den Modulen findest du bei Elegant Themes (Werbung).
